重新创建时jQuery对象不可拖动

Question

请访问http://classrecon.com/invest/mockup.html了解我的问题示例。要重新创建问题：

1. 将PULM拖到“有这些目标...”字段并删除。
2. 点击标签右侧的X来删除标签。
3. 问题：请注意，当您尝试拖动<delete element's text>时，元素将不会拖动。

如何使新标签可拖动？如何将已删除标签的文本传输到新标签？

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'>✘</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()标记新的拖动键时，它只是一个全新的元素。它在您创建选定的$(".drag-key")时不存在，并使与该选择器匹配的所有元素都可拖动。它不包含与JQuery draggables相关联的事件或类。如果你想让你的新拖拽键可拖动，你必须.draggable()新创建的元素就像你原来的元素一样。

Answer 3

您应该使用delegate()方法在附加到密钥代表时使div可拖动。