如何为加载了 DOM 的元素添加 Jquery 可拖动功能？

Question

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

为了更好地理解这里的代码：

拖放新元素的代码：

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();
});

请注意，上面的代码允许将名称为 class draggable 的元素拖放到（克隆）到 work_area div 中，这些元素还可以在work_area div。并且工作得很好。

同时，当我使用以下代码将相同的内容应用于 class 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();
});

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

我在每个可能的位置上都尝试了 condole.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_sub div 接受类 draggable 和 draggable2
并且在向删除的元素添加克隆或其他功能时，添加了一个 if 来检查它是 draggable 还是另一个。
最后添加了相应的参数。

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

如何为加载了 DOM 的元素添加 Jquery 可拖动功能？

How to add Jquery Draggable funcution for elemets that are loaded with DOM?

javascript

jquery

jquery-ui

draggable

jquery-ui-draggable