• Sortable.create

    用此方法可以初始化一个可排序对象。

    表达式:

    Sortable.create('id_of_container',[options]);

    可选项:

    OptionDefaultDescription
    tagli设置一个可被Sortable的标签种类(应包含在表达式指定的容器中),在UL或者OL容器中,LI标签是默认值。
    only(none)此选项将约束指定的CSS class所在的对象才能够加载Sortable,你可以指定一个单独的class名称或者一个CSS class所组成的字符串数组。
    overlapvertical该选项有2个可选值,‘vertical’ 或者 ‘horizontal’。 对于浮动对象或者水平列表,选择‘horizontal’。 竖直的列表对象应该选择 ‘vertical’。
    constraintvertical约束可拖曳的对象的移动方向。可选值为‘vertical’ 或者 ‘horizontal’。
    containment()允许在多个Sortable对象之间进行DragAndDrop,给出一个或者多个Sortable对象的ID或ID字符组成的数组来指定发生DragAndDrop的对象。该行为发生的要点是:所有指定的ID,其容器必定要加载Sortable.create方法。(注意:如果想让拖曳的目的容器仍然具有排序功能,那在containment中必须指定好自生容器的id。)
    format 干嘛的?我不是很清楚。
    handle(none)Draggable中的选项一样,选择一个对象作为拖曳出发之处。(ver 1.8.1没用?)
    hoverclass(none)为创建Droppables的对象指定一个hover时的样式。
    ghostingfalse在拖曳时在原地产生一个克隆的拖曳对象。(ver 1.8.1中该选项在IE下有bug,期待新版本)
    dropOnEmptyfalse如果设置为true时,这个sortable的容器会变成一个可Droppable的对象,进而该容器可以接受任何可拖曳且被容许Drop in的对象加入该容器。
    scroll(none)一大串东东,暂不理解,请看E文:When the sortable is contained in an element with style overflow:scroll, this value can be set to the ID of that container (or the container’s DOM object). The scroll position of the container will now move along when the sortable is dragged out of the viewable area. The container must have overflow:scroll set to include scroll bars. Does not yet work for scrolling the entire document. To get this to work correctly, include this line in your code before creating the sortable: Position.includeScrollOffsets = true; Update: Scrolling the whole document does work (at least on IE7 and Firefox). Use scroll: window
    scrollSensitivity20Will start scrolling when element is x pixels from the bottom, where x is the scrollSensitivity.
    scrollSpeed15Will scroll the element in increments of scrollSpeed pixels.
    treefalseIf true, sets sortable functionality to elements listed in treeTag(点解?)
    treeTagulThe element type tree nodes are contained in.(点解,too?)

    回调函数

    CallbackDescription
    onChange当拖曳引起排序改变时该事件会被触发。当你将一个对象拖曳到另一个Sortable对象中,则该回调函数会在两个Sortable中各自触发一次。该函数默认接受参数为该被拖曳的对象。
    onUpdate当一个拖曳完成并且Sortable的排序被改变时,该事件触发。同样的,如果将被拖曳对象从一个Sortable拉到另一个Sortable时,该回调函数将在各自的Sortable中触发。默认接受的参数为该Sortable容器。

    注意:

    有一点非常重要,在创建Sortable的时候允许的容器对象应该为块对象,当时基于当前浏览器的技术限制,table、tbody、tr等块对象将不被支持。

    在一个嵌套在table中的Sortable对象将不能在IE浏览器下非常顺利的工作,除非为该table赋予一个position:relative的CSS属性。总之啦,尽量不要将Sortalbe容器放到table中就安拉!

    如果你想生成一个带滚动条的Sortable对象,那么最好在该Sortable外嵌套一个div对象,并为该对象设置滚动样式。在IE下你还得做的一个工作就是要为该div附加一个position:relative的CSS属性。

  • Sortables

    一个Sortable是由包含在一个容器内的许多elements组成。当你创建了一个新的sortable,脚本将会调取相应的Draggables和Droppables对象。

    接下来我们将着重学习如何创建一个Sortables(Sortable.create)、注销一个Sortables(Sortable.destroy)和序列化一个Sortables并调用Ajax方法提交该序列(Sortable.serialize)。

  • Droppables.remove

    将对象从一个Droppables列表中移除。

    Droppables.remove(element)
  • Droppables.add

    当一个可拖曳对象进去一个特定区域时,你可以用一个Droppables.add的类触发该反应。

    表达式:

    Droppables.add('id_of_element',[options]);

    可选项:

    OptionDefaultDescription
    accept(none)设置能够接受的以ID String描述的对象或者以CSS Class描述下的一组对象,Droppable仅能接受队列中能够接受可拖曳的对象。
    containment(none)如果可拖曳对象包含在某个指定的对象,Droppable仅仅能接受其中的可拖曳对象,这个参数可以为一个单独的element或者一个elements的数组。这个参数多用于Sortables类中,用来控制DragAndDrop和Sortables。
    hoverclass(none)设置一个CSS class当一个可接受的拖曳对象进入Droppable对象区域时。
    overlap(none)如果设置了‘horizontal’或者‘vertical’值,当可拖曳对象进入Droppable区域超过50%的范围时才会作用。(多用于Sortable类)
    greedytrue如果为true时,系统将终止可拖曳对象在Droppable区域的hover状态(此时可拖曳对象已经被藏匿于Droppable对象之后)

    回调函数:

    CallbackDescription
    onHover当一个可拖曳对象移动到Droppable对象上后调用该函数,该回调函数给出三个参数:Draggable对象,Dropppable对象以及交叠百分比。
    onDrop当一个可拖曳对象释放到Droppable对象,并且被接受后该函数被调用。该回调函数给出三个参数,Draggable对象,Dropppable对象以及Event对象,你可以从Event对象来扩展drop时的附加信息,比如判断是否按着Ctrl键或者Shift键。

    注意:当你想在DOM中删除某个节点,而该节点恰好是一个Droppable对象是,请先用 Droppables.remove(element) 将该对象从Droppables列表中删除,否则你将不能够使用任何Droppable对象。

  • Droppables

    Droppables的作用是什么?就是当一个Draggable对象拖曳并放置到某一个目标对象后,Droppables将产生一个回调函数来响应先前的事件。

    Creating droppables

    请参考Droppables.add

    Disabling droppables

    请参考Droppables.remove