如何为加载了DOM的elemets添加Jquery Draggable funcution?

Question

我有Jquery代码可以将元素拖放到work_areadiv中，效果非常好。 但是当我尝试将相同的函数应用于预加载的 DOM 元素时，在文档就绪时使用另一个可拖动() 函数，预加载的元素可以在工作区内拖动，但新元素不是。

为了更好地理解，以下是代码：

拖放新元素的代码：

function dragger() {
$(".draggable").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
helper: "clone",
cursor: "move"
});
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
console.log("here2");
$("#work_area_div_sub").droppable({
accept: ".draggable",
containment: "#work_area_div_sub",
drop: function( event, ui ) {
console.log("here3");
ui.draggable.clone().appendTo($(this)).draggable().removeClass("draggable").addClass("draggable2");
$(".draggable2").resizable({
handles: "n, e, s, w, se, ne, sw, nw",
aspectRatio: true
});
});
} 
$(document).ready(function() {
dragger();
});

请注意，上面的代码允许将类名draggable的元素拖放(克隆)到work_areadiv中，该元素可以在work_areadiv中进一步拖动。 并且工作得很好。

同时，当我使用以下代码将相同的内容应用于具有类draggable2的预加载元素时：

function dragger_idle() {
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
$("#work_area_div_sub").droppable({
accept: ".draggable2",
containment: "#work_area_div_sub",
drop: function( event, ui ) { 
console.log("here");
}
});     
}
$(document).ready(function() {
dragger_idle();
});

工作正常，让我拖动div 中的预加载元素work_area拖动。 但是让我拖放新元素的第一段代码不起作用。但是，如果我要删除dragger_idle()，则dragger()函数将完全执行。

我尝试了慰问.log在每个可能的位置上检查函数运行了多远。 然而，不知道我在哪里搞砸了。

起初我以为draggable_idle()中的$("#work_area_div_sub").droppable弄乱了draggable()中的$("#work_area_div_sub").droppable，但安慰它告诉我，当我尝试拖动新元素时，$("#work_area_div_sub").droppable根本没有触发。

希望我清楚。 任何帮助将不胜感激。

Answer 1

所以，经过一番头脑风暴，我想通了。

function dragger() {
$(".draggable").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
helper: "clone",
cursor: "move"
});
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
$("#work_area_div_sub").droppable({
accept: ".draggable, .draggable2",
containment: "#work_area_div_sub",
drop: function( event, ui ) {
if((ui.draggable).hasClass('draggable2')) { } else { 
//whatever we wanna do with the new drag drop elements
}
}
});
}

所以，我所做的是，

• 告诉#work_area_div_subdiv接受draggable和draggable2
• 在将克隆或其他函数添加到删除的元素时，添加了一个if来检查它是draggable还是另一个。
• 最后相应地添加了参数。

坦率地说，虽然没有答案，但堆栈确实帮助我以不同的方式理解了自己的问题，通过写下来自己解决它。 所以，谢谢。