jQuery Drag/Drop/Sortable-Example：在移动过程中排序（=拖动过程）答案

【问题标题】：jQuery Drag/Drop/Sortable-Example: Sorting during moving (= dragging process )jQuery Drag/Drop/Sortable-Example：在移动过程中排序（=拖动过程）
【发布时间】：2014-06-04 16:03:50
【问题描述】：

以下源代码是一个工作示例。我可以拖放和排序后记。但我不仅要对后记进行排序，还要在拖动过程中进行排序。我应该在这里添加什么？

JSFIDDLE -> http://jsfiddle.net/w9php/（所有使用的库都附在此处）

HTML 部分

<div class="container">
    <div class="row">    
       <div class="sequence span3">
            <div id="droppable1" class="droppableBoxes">
                <ol class="choiceMantle cDroppChoiceMantle">
                    <li class="placeholder">Drag here into </li>
                </ol>
            </div>
        </div> 
        <hr />
        <p class="lead">Drag items below into the box above</p>
        <div class="choices span3">
            <div id="qID_2" class="choiceMantle unsortedChoiceBox1">
                <ol>    
                    <li id="item-16" class="draggable1">Cappuccino</li>
                    <li id="item-19" class="draggable1">Latte</li>
                    <li id="item-33" class="draggable1">Espresso</li>
                    <li id="item-33" class="draggable1">Melange</li>
                </ol>
            </div>
        </div>
    <div>
</div>

jQuery 部分

var i1 = 0;

$( "#droppable1 ol" ).droppable({
        scope: "d1",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: '.unsortedChoiceBox1 li',
        drop: function( event, ui ) {
            i1++;
            ui.draggable.draggable('option','revert',false); 
            $( this ).find( ".placeholder" ).remove();
            ui.draggable.clone().appendTo(this);
            ui.draggable.remove();
        }
}).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
});


$('.unsortedChoiceBox1 li').draggable({
        appendTo: "body",
        helper: "clone",
        revert: true,
        scope: "d1",
        cursor: 'move',
});

JSFIDDLE -> http://jsfiddle.net/w9php/（所有使用的库都附在此处）

附言JsFiddle 不能真正处理 Bootstrap，它应该看起来有些不同，但这个例子中的外观并不重要......

【问题讨论】：

您需要列出可排序的列表，但只有一个应该接受另一个的项目 - 我的理解是否正确..？

标签： jquery html jquery-ui drag-and-drop jquery-ui-sortable

【解决方案1】：

选项是可拖动的connectToSortable

但这不起作用，因为您同时使用了 droppable 和 sortable。我不明白目的，但如果你将它初始化为可排序并在可拖动中使用 connectToSortable 选项，你将不需要 droppable

【讨论】：