jQuery UI draggable 不适用于新创建的 DOM 元素

Question

我有一些可以使用 jQuery UI 拖动的 DOM 元素。所有都工作正常，但是当我使用 jQuery 创建一些元素时，它们根本不能拖动。 IE

$('div.draggable').draggable(); //Existing element , it works :)
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

提前致谢 ！！！

我正在尝试这个：

<script type="text/javascript">
     $(document).ready(function(){
         $('body').append('<p class="draggable">Newly Created Paragraph</p>');
         $('p.draggable').draggable(); **//This is not working**
     });
</script>

但是不知何故这是有效的

    <script type="text/javascript">
     $(document).ready(function(){
         $('body').append('<p class="draggable">Newly Created Paragraph</p>')
                 .find('p.draggable').draggable(); **This is working**

     });
</script>

Answer 1

我知道已经有一段时间了，但这个问题最近也困扰着我。 正如其他人提到的，您必须在新创建的项目上重新运行.draggable() ，但如果您在.draggable()定义了某些选项，则这不起作用。 同样不起作用的是将$().draggable()放在一个函数中，然后在创建一个新元素后调用该函数（这个技巧确实适用于重置 droppables - 去图）。

无论如何，长话短说 -> 将$().draggable()设置放在一个函数中，然后在创建新元素后调用该函数确实有效，但我不得不将其从document ready函数中取出......我禁用了它，它起作用了。

您可以多次调用该函数，并且在每个创建的元素之后它都会继续工作。 似乎如果它在document.ready声明中，那么它就是一笔交易..

希望有帮助。

Answer 2

在新创建的元素插入 DOM 后，您需要调用 draggable()。

原因是第一行代码只匹配现有元素。 第一行没有选择新创建的元素。

Answer 3

我有这个问题，但读完后我可以解决它。 所以你必须在构建新元素后再次调用 draggable() 方法，这是我的代码：

$(".in-browser").each(function(){
        $(this).dblclick(function(){
            var browseIn = $(this).data("href");
            var browserHTML = '<div class="browser draggable">\
        <ul class="browser-buttons">\
            <li>_   \
            <li>#   \
            <li>x   \
        </ul>\
        <div class="browser-win-container">\
        <div class="addressbar"></div>\
        <iframe class="opening-window" src="'+browseIn+'"></iframe>\
    </div>\
    </div>';
            $("body").append(browserHTML);
            $(".draggable").draggable(); //look at here
        });
    });

Answer 4

每次调用事件操作时都应该调用 draggable() 函数：

$('body').on('click', '.add-new-table', function () {
 $( ".canvas" ).prepend('<div class="ui-widget-content draggable"><p>Drag me</p></div>');
 $(function(){
   $(".draggable" ).draggable({
     containment: "parent"  
   });
 });
});

Answer 5

实际上，draggable 似乎存在问题。 当您附加一些 htmlTag 然后尝试找到它并使其可拖动时，它无法识别它。 尝试使用createElement创建一个新元素，然后附加它。 希望它有效

var newEle = document.createElement('p');
$(newEle).attr("class","draggable").draggable();
$('body').append($(newEle));

或者

var newEle = document.createElement('p');
$(newEle).attr("class","draggable");
$('body').append($(newEle));
$('p.draggable').draggable();

Answer 6

您必须在新创建的对象的实例上应用draggable，重写代码：

<script type="text/javascript">
 $(document).ready(function(){
    var newElement = '<p class="draggable">Newly Created Paragraph</p>';
    $('body').append(newElement);
    newElement.draggable(); **//This is working**
 });

它现在应该可以工作了。

Answer 7

您可以在创建新元素后使用 setTimeout 调用可拖动函数。

$('div').click(function(){
 $('body').append('<div class="box"></div>');
 setTimeout(function() {
  $('div.box').draggable({
   drag: function( event, ui ) {},
   cursor:'-webkit-grabbing'
  });
 },1000);
})

Answer 8

$(document).on("mouseenter", ".item", () => {
     $('.item').draggable(); }); 

它的工作是因为拖动事件触发 mouseenter