jQuery - 操縱可排序列表中的丟棄元素

我有一個可拖動列表（.field），您可以在其中拖放&刪除項目到可排序列表（.sortlist）中。我這樣做是因爲我不希望主列表（.field）以任何方式改變。它工作正常，除了我不能解決如何操縱可排序列表中的拖放字段。jQuery - 操縱可排序列表中的丟棄元素

我可以用一個函數下面從一個可拖動做它變成一個可投放區域「下拉：」在投擲的（）：

$(this).append('html code here to change content of dragged field');

然而，這並不內部的排序工作（）。我的代碼如下所示：

$(".sortlist").sortable({ 
    receive: function(event, ui) { 
    var dropElemTxt = $(ui.item).text(); 
    var dropElemId = $(ui.item).attr('id'); 
    $(ui.item).replaceWith('<li class="box" id="'+dropElemId+'">Updated field! '+dropElemTxt+'</li>'); 
    } 
});

$（ui.item）.replaceWith改變正被拖到主場，所以這是行不通的。我嘗試了$（this）.replaceWith，但更新了可排序區域（.sortlist）。

任何想法我需要什麼代碼引用被拖動的項目？

非常感謝，阿里。

來源

2010-01-19 WastedSpace

我想我已經完成了它。有點哈克，但似乎工作！

我需要使用$（「sortlist中李：最後」）來訪問拖動的元素...

來源

2010-01-20 16:29:18 WastedSpace

我覺得其實我有更好的解決辦法想出了......似乎工作至今..

我附加了一個droppable到一個可排序來聲明拖動項的全局變量。像這樣有點：

$(".sortlist").droppable({ 
    drop: function(e, ui) { 
    draggedItem = ui.draggable; 
    } 
}).sortable({ 
    receive: function(event, ui) { 
    //do something with the 'draggedItem' here... 
    var droppedElemTxt = draggedItem.text(); 
    var droppedElemId = draggedItem.attr('id'); 
    } 
});

來源

2010-02-05 11:25:49 WastedSpace

我跟着你的思路，但也有使用這種方法（有時元素被丟棄利用可放開+排序時就消失了）一些錯誤。這裏的東西，制定了我：

$(".draglist").draggable({ 
    start: function(e, ui) { 
    draggedItem = ui.item; 
    } 
}); 

$(".sortlist").sortable({ 
    receive: function(event, ui) { 
    //do something with the 'draggedItem' here... 
    var droppedElemTxt = draggedItem.text(); 
    var droppedElemId = draggedItem.attr('id'); 
    } 
    , start: function(e, ui) { 
    draggedItem = ui.item; 
    } 
});

來源

2010-03-14 07:07:06

不能夠進入下降元素是known bug in JQuery ui sortables.該票據包含一個補丁，允許您訪問下降元素，而這預計將固定在未來主要發佈。

來源

2010-10-02 06:37:50

*幾年後* – Petah 2014-12-08 09:54:46

你可以得到拖動項目在beforeStop事件：

beforeStop: function (event, ui) { draggedItem = ui.item;}, 
receive: function (event, ui) { /* use draggedItem here*/ }

使用beforeStop事件，而不是收到，就足以讓我：

beforeStop: function(event, ui) { 
     var myClassItem = $('.myClass', ui.item); 
     myClassItem.bind('click', function(){ /*my function*/ }); 
    }

來源

2011-01-19 09:55:57 Svetlana

這也適用於我，謝謝。我知道已知的錯誤（在下面的帖子中提到），但它仍然令我頭疼。通過設置beforeStop事件中的項目，我不得不惹惱接收事件中完全避免該錯誤的項目。 – azzy81 2013-11-25 11:10:33

jQuery - 操縱可排序列表中的丟棄元素

回答

相關問題