向页面添加元素。比拖吧

时间:2016-08-06 11:40:42

标签: javascript jquery draggable

我在页面上添加了一个元素,但我无法拖动它。任何人都可以帮我解决这个问题。这是我的代码:

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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