• Draggable - [script.aculo.us]

    2008-02-25

    Draggable

    为了让一个对象能够被拖拽,你可以简单的创建一个Draggable类的实例来实现,或者为一个附加的内置功能添加Sortable类。

    表达式:

    new Draggable('id_of_element',[options]);

    一些options参数表:

    OptionDefaultDescription
    handle(none)设置触发该拖拽的对象,默认为对象本身,也可以是其他的对象,ID,或者CSS选择符所指定的对象。
    revertfalse如果设置为真,则当拖拽结束时对象将回答其原始的位置。也可以设置一个回调函数,当拖拽结束的时候触发。
    snapfalse可以设置为一个由数组[x,y]作为步长的移动方式,还可以用function(x,y){ return [x,y] }形式返回移动步长。
    zindex1000设置被拖拽对象的CSS z-index值。
    constraint(none)如果设置为 'horizontal' 或者 'vertical',则被拖曳对象的移动范围将被锁定在水平或者竖直方向。
    ghostingfalse克隆一个被拖拽对象,将原对象留在原地,对克隆对象进行拖曳直到完成,原对象再覆盖克隆对象。
    starteffectOpacity设置拖曳开始时的Effect效果。
    reverteffectMove当revert选项为true时,设置被拖曳对象返回原坐标时的Effect效果。
    endeffectOpacity设置拖曳结束时的Effect效果

    options参数同样能够支持以下的回调函数:

    CallbackDescription
    onStart当拖曳开始时触发。
    onDrag在拖曳进程中触发。
    changeonDrag时调用?
    onEnd拖曳结束时触发。

    除了“change”回调函数外,其他的函数在回调时接收2个参数:被拖拽的对象及mouse的event对象。

    下面来看两个DEMO:

    // from the shopping cart demo
    new Draggable('product_1',{revert:true});
    
    // constrain direction and give a handle
    new Draggable('my_div',{constraint:'horizontal',handle:'handle'});

    如需禁止一个拖曳,则可以将实例赋予一个变量,代码如下:

    var mydrag = new Draggable('product_1', {revert:true})
    (... do stuff ..)
    mydrag.destroy();

    用该方法你可以随时激活或者禁止对象的拖曳。


    历史上的今天:

    Drag And Drop 2008-02-25

    随机文章:

    Sortable.create 2008-03-13
    Sortables 2008-03-10
    Droppables.add 2008-03-04
    Droppables 2008-03-04

    收藏到:Del.icio.us




    引用

    下面Blog引用了该文:
  • Sortable.create

    Blog:摄氏零度以后...
    2008-03-13 15:40:36
  • Draggables

    Blog:摄氏零度以后...
    2008-03-04 12:07:38