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