jQuery Drag/Drop/Sortable-Example: сортировка во время перемещения (= процесс перетаскивания)

Question

Следующий исходный код является рабочим примером. Я могу перетаскивать и сортировать послесловия. Но я хочу сортировать не только послесловия, но и в процессе перетаскивания. Что именно я должен добавить здесь?

JSFIDDLE -> 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 -> http://jsfiddle.net/w9php/ (все используемые библиотеки прилагаются там)

ps JsFiddle не может действительно обрабатывать Bootstrap, он должен выглядеть по-другому, но внешний вид в этом примере не имеет решающего значения...

Answer 1

Опция connectToSortable перетаскиваемого

Но это не работает, потому что вы используете и сбрасываемую, и сортируемую. Я не понимаю цели, но если вы инициализируете ее как сортируемую и используете опцию connectToSortable в draggable, вам не понадобится dropable