Question

我正在尝试让jquery添加新div然后让它可拖动但我一直在尝试并在google上查找我在这里找不到任何内容我的代码如下

 $(document).ready(function() {

 $("#draggable").draggable({ 
   containment: 'parent',
   handle: 'drag_border',
   drag: function(e, ui) {
          var top = ui.position.top;
          var left = ui.position.left;
          $("#top").html(top);
          $("#left").html(left);
           }
       }); 
   });

       function New_Text() {   
            $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
              }

谢谢

Answer 1

如果您使用jQuery UI，请创建您的元素并使其可拖动：

$("<div />").draggable();

Answer 2

这里的问题是你在尝试使其可拖动后创建了DIV。

jQuery事件仅适用于运行Javascript时存在的元素 - 有很多方法可以使用live和delegate函数 - 但它看起来不像你的插件允许这样做。

因此，如果该代码需要保持不变，则将创建DIV的位移动到可拖动函数之上 - 它将起作用。

Answer 3

我没有尝试过，但这应该有效：

function New_Text() {   
  $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
        setTimeout(function() {
           ...
          });

         }, 10);
   }

您想要创建div，让浏览器将其添加到DOM树中，然后调用draggable函数。

Answer 4

由于有些人在这里提到了draggable()函数，这是一个jQuery UI函数，这里有一个简短的操作方法：

将以下行（对jQuery UI的引用）添加到.html页面，头部内部或正文底部：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

现在，为了使#draggable draggable你在脚本中写入（你的脚本或对它的引用必须在引用jQuery UI之后）：

$('#draggable').draggable()

在Jquery中创建新的Div Draggable

4 个答案: