单击创建可拖动的div使父可拖动而不是新的div

Question

我在点击第二行中的4项时创建一个div。 我想像第一个一样创建一个新的可拖动div。 我确定导致问题的是.draggable（）。

我尝试了许多其他地方，但无法弄清楚在哪里添加.draggable（）

    var i = 0;
 $('#dropbtn').click(function() {
    // insert a SPAN tag with class="spn" at the end in all DIVs with class="cls"
     if(i == 0){
         $('#dropbtn').append('<div class="boxArt red" row="2" col="4" id="dragme3">DRAG ME3</div>').draggable();
         i=i+1;    
     }
});

JSFIFFLE

Answer 1

您正在将.draggable()应用于错误的元素。 .append()方法返回容器元素，而不是您添加的内容。

这应该有效：

$('<div class="boxArt red" row="2" col="4" id="dragme3">DRAG ME3</div>').draggable().appendTo('#dropbtn');