如何为使用 DOM 加载的元素添加 Jquery Draggable 功能？答案

【问题标题】：How to add Jquery Draggable funcution for elemets that are loaded with DOM?如何为使用 DOM 加载的元素添加 Jquery Draggable 功能？
【发布时间】：2021-12-27 05:58:10
【问题描述】：

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

请注意，上面的代码允许将类名为draggable的元素拖放（克隆）到work_area div中，进一步可以在work_area div中拖动。而且效果很好。

同时，当我使用以下代码将其应用于类 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 根本没有触发.

希望我很清楚。非常感谢任何帮助。

【问题讨论】：

标签： javascript jquery jquery-ui draggable jquery-ui-draggable

【解决方案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 还是其他。
最后相应地添加了参数。

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

【讨论】：