向页面添加元素。比拖动它

Question

我正在页面上添加一个元素，但无法拖动它。谁能帮我解决 this.This 是我的代码：

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();

Answer 1

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

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

这是您的代码的有效更新：

Add an element to page. Than drag it