可拖动的 jQuery UI 不适用于新创建的 DOM 元素

Question

我有一些可以使用 jQuery UI 拖动的 DOM 元素。一切正常，但是当我使用 jQuery 创建一些元素时，它们根本不可拖动。即

$('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() 设置放入一个函数中，然后在创建新元素后调用该函数 DID WORK，但我不得不将它从 document ready 函数中取出.....之后我禁用了它，它起作用了。

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

希望对您有所帮助。

Answer 2

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

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

Answer 3

其实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 4

我遇到了这个问题，但是在阅读了这个之后我可以解决它。所以你必须在构建新元素后再次调用 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 5

每次调用事件动作时都应该调用 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 6

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

<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