jQuery UI Draggable/Sortable - 動態添加的項目不可拖動

我有一個可拖動/可排序的列表組，我動態添加項目，但問題是，一旦添加了一個項目，就無法移動它們到新列表。您可以在此處看到這些功能：http://jsfiddle.net/Y4T32/2/jQuery UI Draggable/Sortable - 動態添加的項目不可拖動

將項目從可用列表拖到目標列表中的一個，您將看到我的意思。現在添加一個「標註」，並嘗試將新項目拖動到其中一個目標列。

我在這裏發現了另一個答案，但是一直無法重現他們得到的結果（當然，現在找不到答案）。任何洞察我在這裏做錯了什麼？

來源

2012-05-16 Aaron Wagner

我發現[這個答案]（http://stackoverflow.com/questions/2583883/how-to-auto-apply-drag拖放效果到動態添加元素）並做了一些細微修改。但是，在我看來，這可能不是最好的解決方法。我更新了我的小提琴。 http://jsfiddle.net/Y4T32/7/ –

修訂ANSWER

你必須調用.draggable()對於被添加的每個元素。在初始化時使用的jQuery選擇器僅適用於目前存在的元素，而不適用於您要創建的元素。

下面是一些JS應該工作：

var draggable_opts = { 
      connectToSortable: ".sph-callout-portlet", 
      helper: "clone", 
      opacity: 0.75, 
      revert: 'invalid', 
      stop: function(event, ui) { 
       //alert(ui) 
      } 
     }; 

$(function() { 
    $(".sph-callout-portlet").sortable({ 
     opacity: 0.75, 
     placeholder: "ui-state-highlight", 
    }).disableSelection(); 

    $("#sph-callout-portlet-avail li").draggable(draggable_opts); 

    $(document).on("click",'#addNewCo',function(e){ 
     e.preventDefault(); 
     var newCo = $('<li>New Callout</li>').draggable(draggable_opts); 
     $('#sph-callout-portlet-avail').append(newCo); 
    }); 
});

http://jsfiddle.net/SGevw/

來源

2012-05-16 20:42:02 ubik

在jsFiddle無法訪問的情況下，在這裏發佈代碼是個好主意。此外，你做了什麼的解釋是一個加號。 – j08691

@ j08691，完成。感謝您的支持！ – ubik

@PedroFerreira，這是非常接近我想要的，除了我不希望用戶能夠拖動他們之間的列或回到可用的列。這就是爲什麼我給他們不同的名字。 –

jQuery UI Draggable/Sortable - 動態添加的項目不可拖動

回答

相關問題