javascript - jQuery object not draggable when recreated

Question

Please visit http://classrecon.com/invest/mockup.html for the example of my problem. To recreate the problem:

1. Drag PULM into the "Has these targets..." field and drop.
2. Delete the tag by hitting the X to the right of the tag.
3. PROBLEM: Notice that when you try to drag <delete element's text> the element won't drag.

How can I make the new tag draggable? And how can I transfer the deleted tag's text to the new tag?

JS:

$(function(){
    $(".drag-key").draggable();
    $(".tag-collection").droppable({
        over: function(event, ui){
            $(this).css("background-color","rgba(0,191,255,.3)");
        },
        out: function(event, ui){
            $(this).css("background-color","white");
        },
        drop: function(event, ui){
            $("<div class='key'></div>").text( ui.draggable.text() ).appendTo( this ).append(" <span class='remove'>✘&lt;/span>");
            ui.draggable.remove();
        }
    });

    // I THINK THE PROBLEM IS HERE
    $(document).on('click', 'span.remove', function() {
        $(".key-rep").append("<div class=\"drag-key key\">&lt;removed element's text&gt;</div>");
        $(this).closest('.key').hide();
    });
});

Answer 1

您需要 $(".drag-key").draggable();在结束时再次运行该行$(document).on('click', 'span.remove', function() {

它应该看起来像这样

$(document).on('click', 'span.remove', function() {
        $(".key-rep").append("<div class=\"drag-key key\">&lt;removed element's text&gt;</div>");
        $(this).closest('.key').hide();
        $(".drag-key").draggable();
    });

这是一个带有建议修复的 JSFiddle

JSFiddle

Answer 2

当你.append()标记一个新的拖动键时，它只是一个......一个全新的元素。它在您创建 selected 时不存在$(".drag-key")，并使与该选择器匹配的所有元素都可拖动。它不包含与 JQuery 可拖动相关的事件或类。如果要使新的拖动键可拖动，则必须.draggable()像处理原始元素一样使用新创建的元素。

Answer 3

当附加到 key-rep 时，您应该使用delegate()方法使 div 可拖动。