使用 JavaScript createElement() 方法在 keydown 上创建的元素不适用于 jQuery draggable() 方法答案

【问题标题】：Element created on keydown using JavaScript createElement() method won't work with the jQuery draggable() method使用 JavaScript createElement() 方法在 keydown 上创建的元素不适用于 jQuery draggable() 方法
【发布时间】：2021-03-16 21:50:46
【问题描述】：

我正在开发一个拖放项目，可以将项目添加到工作区并拖动以进行定位。我正在尝试使用一个关键代码来创建多个相同类型的元素，所有这些元素都可以拖动。只要在页面加载时创建了可拖动元素，jQuery 函数就可以工作，但如果它是使用函数创建的，则 draggable() 方法对它不起作用。有没有办法让函数识别用函数创建的元素？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Draggable Div Test</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .test {
      width: 50px;
      height: 50px;
    }
  </style>
  
  </head>
<body>
  <div id="area" style="border: 1px solid black; width: 500px; height: 500px;"> </div>
  
  <script>
    var area = document.getElementById("area");
    function duplicate(e) {
      switch(e.keyCode) {
        case 49:
        var test = document.createElement("div");
        test.classList.add("test");
        test.classList.add("draggable");
        console.log(test.classList)
        test.style.backgroundColor = "blue";
        area.appendChild(test);

        break
      }
    }
    document.addEventListener("keydown", duplicate)

    $( function() {
      $( ".test" ).draggable();
    } );
  </script>

</body>
</html>

谢谢

【问题讨论】：

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

【解决方案1】：

jQuery draggable 有个函数叫clone:

 $(function() {
     i = 0

     $("#draggable").draggable({
         helper: 'clone',
         appendTo: "#droppable",
     });

    $("#droppable").droppable({
        accept: "#draggable",
    }); 

    i++;

    var $obj = ui.helper.clone().attr( 'data-name', 'newelementdropped' +i).draggable({
   stop : function (event, ui) {
    YOUR CODE
    });
}

看到这个答案：Jquery draggable(), clone() to append div...Pls Fiddle my jsfiddle

【讨论】：

【解决方案2】：

插入元素后重新初始化插件即可。

类似：

$(".test").draggable("destroy").draggable();

【讨论】：

我试过这个并且得到了相同的结果。还有另一种方法来重新初始化插件吗？谢谢