jQuery: draggable подключение к сортируемой. перетаскиваемый элемент имеет другой DOM из сортируемого списка

теперь я могу перетащить элемент на сортировку. Но на нем был другой дом.

<!-- The draggable items. Has the "original" DOM in the LI tags. -->
<ul class="draggable_text">
    <li><span>DRAG THIS A</span></li>
    <li><span>DRAG THIS B</span></li>
</ul>


<!-- This list has a different DOM in the LI tags -->
<ul id="stagerows">
    <li><p>This is a new DOM dragged from "DRAG THIS A"</p></li>
    <li><p>This is a new DOM dragged from "DRAG THIS B"</p></li>
</ul>

$(document).ready(function() {
    $('.draggable_text > li').draggable({
        //helper:'clone',
        helper: function(event, ui) {
            return '<div style="width: 100px; height: 50px; border: 1px solid #000; background-color: #fff;">xxx</div>';
        },
        connectToSortable:'#stagerows'
    });

    $('#stagerows').sortable({
        handle: '.drag_handle'
    });
});

помощник в этом: xxx Это должно быть сброшено в сортируемый...

"помощником" работает. Но когда я" уронил " предмет в сортировку, он просто возвращается к "оригинальному" DOM. Я хотел бы, чтобы" недавно созданный DOM " (тот, который создан в helper) был сброшен в сортировку.

Я надеюсь, что я имею смысл. Благодарить ты!

другой способ сказать это: когда я тащу яблоко, оно превращается в апельсин. но когда я роняю его, он снова превращается в яблоко..

12
draggable jquery jquery-ui-sortable

1 ответов

$('.draggable_text > li').draggable({
    helper: function(event, ui) {
        var type = $(this).find('.link_type').val();
        return create(type,0);
    },
    connectToSortable:'#stagerows'
});

$('#stagerows').sortable({
    handle: '.drag_handle',
    placeholder: 'placeholder_sortable'
});

/**
 * When item is dropped from the Add <Stuff>
 */
$('#stagerows').droppable({
    drop: function(event, ui){
        type = ui.draggable.find('.link_type').val();
        ui.draggable.empty();
        return ui.draggable.html(create(type,0))
    }
});
12