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 - 去图）。

无论如何，长话短说 - ＆gt;将$().draggable()设置放在一个函数中，然后在创建新元素DID WORK之后调用该函数，但是我必须先解决document ready函数.....我禁用它后，它工作了

您可以多次调用该函数，并在每个创建的元素之后继续工作。看来如果它出现在document.ready声明中，那就是它的一次拍卖......

希望有所帮助。

Answer 2

在将新创建的元素插入DOM之后，您需要调用draggable（）。

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

Answer 3

实际上似乎有可拖动的问题。当你附加一些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

您必须在新创建的对象的实例上应用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

jQuery UI draggable不能处理新创建的DOM元素

8 个答案: