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

Question

我正在做一个拖放项目，项目可以添加到工作区并拖动以定位。我正在尝试使用一个关键代码来创建多个相同类型的元素，所有这些元素都可以被拖动。只要在页面加载时创建了可拖动元素，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>

谢谢

Answer 1

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

类似于：

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

Answer 2

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

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

Element created on keydown using JavaScript createElement() method won't work with the jQuery draggable() method

javascript

html

jquery

css

jquery-ui-draggable