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()、それはまさにそれです..まったく新しい要素です。選択したものを作成した時点では存在せず、$(".drag-key")そのセレクターに一致するすべての要素をドラッグ可能にしました。JQueryドラッグ可能オブジェクトに関連付けられたイベントまたはクラスは含まれていません。新しいドラッグキーをドラッグ可能にする.draggable()場合は、元の要素と同じように、新しく作成した要素に移動する必要があります。

Answer 3

delegate()key-repに追加するときに、メソッドを使用してdivをドラッグ可能にする必要があります。