向页面添加元素。比拖吧

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

JavaScript和jQuery

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

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

Demo Here

Answer 1

首先，$ .draggable是一个来自jQuery UI包的方法，所以如果你想使用它，你将不得不包含它。

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

以下是您的代码的工作更新：

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