JQuery Droppables - Изменить элемент по капле

Question

Я немного новичок в jQuery и надеюсь, что кто-нибудь мне поможет.

Я пытаюсь изменить элемент (li) на другой элемент (div) после удаления (li).

Пример кода:

$("#inputEl>li").draggable({ 
    revert: true, 
    opacity: 0.4,
    helper: "clone"
});
$("#dropEl")
    .droppable({ 
        accept: ".drag",
        hoverClass: "dropElhover",
        drop: function(ev, ui) {
            // change the li element to div here
        }
});

Проблема в том, когда я использую

drop: function(ev, ui) {
     $(ui.draggable).replaceWith("<div>Some content</div>");
}

исходные перетаскиваемые элементы будут отключены при срабатывании вышеуказанной функции.

Я использую последние стабильные версии jQuery и jQuery UI.

Answer 1

Итак, что вы хотите, чтобы сохранить исходный список в целости и перетаскивать элементы списка в dropEl? Как насчет этого:

drop: function(ev,ui) {
     $(this).append("<div>Some content</div>");
}

Или, если вы хотите заменить элементы списка на элемент div и также перетаскивать элемент div, вы можете попробовать это:

drop: function(ev, ui) {
        $(ui.draggable).replaceWith("<div>Some content</div>");
        $("#inputEl>div").draggable({ 
            revert: true, 
            opacity: 0.4,
            helper: "clone"
        });
    }

Исходный перетаскиваемый вызов делает элементы перетаскиваемыми только во время вызова. Если вы изменяете или добавляете элементы и хотите, чтобы они были перетаскиваемыми, вам нужно будет снова вызвать функцию draggable ().

Answer 2

Спасибо за ответ.

Ваш первый код сработал, и, кроме того, я также могу отсортировать div в Droppable следующим образом:

    drop: function(ev, ui) {
    $(this).append("<div>Some content</div>");
    $("#dropEl").sortable();
}

Теперь проблема в том, как мне узнать, что это за список, когда я изменил его на divs? Я использую следующий код для получения каждого элемента id:

drop: function(ev, ui) {
            revert: true;
            var this_id = $(ui.draggable).attr("id");
            $(this).append('<div id="'+this_id+'">Some content</div>');
            $("#dropEl").sortable();
        }