javascript - 添加一个元素到页面。比拖动它

Question

我正在页面上添加一个元素，但无法拖动它。谁能帮我解决这个问题。这是我的代码:

HTML

<div class="mainDiv">
    <ul>
      <li>
        <input type="button" value="clickme" id="clickme">
      </li>
    </ul>
</div>

CSS

#dragme {
  height: 100px;
  width: 100px;
  background-color: red;
  cursor: pointer;
}

以及带有 jQ​​uery 的 JavaScript

 $("#clickme").click(function() {
    $(".mainDiv").append("<div id='dragme'>Drag me</div>");
  });

  $("#dragme").draggable();

Demo Here

Answer 1

首先，$.draggable是jQuery UI包中的一个方法，所以如果你想使用它，你必须包含它。

其次，当您调用 $("#dragme").draggable() 时，该元素尚未添加到 DOM，因此 $("#dragme") code> 不会返回任何内容。在页面中添加#dragme 元素后，您必须调用此函数。

这是您的代码的工作更新:

https://jsfiddle.net/tpdx1e83/1/