Jquery-ui可拖动和动态Jquery-ui可拖动？

Question

Jquery-ui可拖动和动态Jquery-ui可拖动？

9

这是我从http://jqueryui.com/demos/draggable/获取的代码。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  <script src="../../jquery-1.6.2.js"></script>
  <script src="../../ui/jquery.ui.core.js"></script>
  <script src="../../ui/jquery.ui.widget.js"></script>
  <script src="../../ui/jquery.ui.mouse.js"></script>
  <script src="../../ui/jquery.ui.draggable.js"></script>
  <link rel="stylesheet" href="../demos.css">
  <style>
  .draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
   $(function() {
    $( ".draggable" ).draggable();
    $('.content').click(function(){
     var htmlData='<div  class="draggable ui-widget-content      ui-draggable"><p>Drag me around</p></div>';
     $('.demo').append(htmlData);
    });
   });
  </script>
 </head>
 <body>
  <div class="demo">
   <div class="draggable ui-widget-content">
    <p>Drag me around</p>
   </div>
   <div class="content">Test </div>
  </div><!-- End demo -->
 </body>
</html>

我正在动态创建可拖动组件，如您在函数中所见，我正在使用 append 方法。但是新生成的可拖动对象无法拖动，尽管我已经给出了 jQuery UI 生成的类。

- Ali Nouman

4个回答

4

出于性能考虑，建议改为使用以下代码：

$('.draggable:not(.ui-draggable)').draggable();

这将防止使用jQuery UI内置类重新初始化已经可拖动的元素。另外，如果您的代码在之后修改了一个单独可拖动元素的属性，而这些属性可能与新的可拖动元素不匹配，您可能会导致一些被重置。

使用jQuery更加具体没问题。

更新：

没有指定要使用此实例。根据Ricardo的编辑：

$(function() {
    $( ".draggable" ).draggable();
    $('.content').click(function(){
        var htmlData='<div  class="draggable ui-widget-content"><p>Drag me around</p></div>';
        $('.demo').append(htmlData);
        $('.draggable:not(.ui-draggable)').draggable(); //Here
        });
   });

我还注意到您手动添加了ui-draggable类。其实，您不需要这样做。事实上，这会导致我之前说的方法无效。

- Kyle Macey

0

我建议这样做，因为如果你想将一个配置对象传递给可拖动函数，你就不必在两个不同的地方重复它：

<script>
   $(function() {
      setDraggable();

      $('.content').click(function(){
      var htmlData='<div  class="draggable ui-widget-content      ui-draggable"><p>Drag me around</p></div>';
      $('.demo').append(htmlData);

      setDraggable();
     });
   });

   function setDraggable(){
       $( ".draggable" ).draggable();
   }
</script>

- user3791372

0

<script>
    $(function() {
        $(".draggable").draggable();
        $(".content").click(function(){
            var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>';
            $(".demo").append(htmlData);
        });
    });
</script>

只需要改变位置即可。

<script>
    $(function() {    
        $(".content").click(function(){
            var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>';
            $(".demo").append(htmlData);
            $(".draggable").draggable(); //bring it here so that for the newly inserted/created dom elements, jquery draggable can be initialized.
        });
    });
</script>

- Robin Rizvi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ricardo Binns · Accepted Answer

尝试在动态创建元素添加后调用$( ".draggable" ).draggable();。

$(function() {
    $( ".draggable" ).draggable();
    $('.content').click(function(){
         var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>';
         $('.demo').append(htmlData);
         $( ".draggable" ).draggable();
    });
});

演示