在 Jquery 中使新的 div 可拖动

Posted 2023-05-08

【中文标题】在 Jquery 中使新的 div 可拖动

【英文标题】：Make New Div Draggable in Jquery

【发布时间】：2011-04-02 02:06:07

【问题描述】：

我正在尝试让 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"); 
              

谢谢

【问题讨论】：

这只是一个sn-p，能不能多贴一些代码方便调试？

你可以在页面加载时制作 div，并在需要时隐藏它吗？

@alexy13 - 我认为问题在于他稍后创建了 div，因此事件处理程序没有附加到 div，我认为 live 函数不会为此工作，但是这几乎就是他所需要的。

我的意思是发布一些html，以便我可以更轻松地找到问题。有时我不太擅长解释：P

【参考方案1】：

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

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

【参考方案2】：

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

jQuery 事件仅适用于 javascript 运行时存在的元素 - 可以使用 live 和 delegate 函数解决此问题 - 但看起来您的插件不允许这样做。

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

【参考方案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函数。

【参考方案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 可拖动，您可以在脚本中编写（您的脚本或对它的引用必须在对 jQuery UI 的引用之后）：

$('#draggable').draggable()