Question

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

JSFIDDLE - ＆gt; http://jsfiddle.net/w9php/（所有使用过的库都附在那里）

HTML PART

<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 PART

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 - ＆gt; http://jsfiddle.net/w9php/（所有使用过的库都附在那里）

P.S。 JsFiddle无法真正处理Bootstrap，它应该有所不同，但这个例子中的外观并不重要...

Answer 1

该选项为可拖动

的connectToSortable

但由于您使用了droppable和sortable，因此无效。我不明白目的，但如果你将它初始化为可排序并在draggable中使用connectToSortable选项，你将不需要可放置

jQuery拖放/可排序 - 示例：移动期间的排序（=拖动过程）

1 个答案: