JQUERY 获取在 DROPPABLE 中删除的 SORTABLE 项目的 id

Question

我有可排序的表格元素。我希望能够将列表中的项目放入垃圾箱（可丢弃）div。

我可以获得连接的可排序或拖放列表的 ID。但是将 sortable 与 droppable 结合起来让我很难过。

$("#trash").droppable({
accept: "tr.sortable-row",
hoverClass: "ui-state-hover",
drop: function(ev, ui) {

    var draggableId = $("tr.sortable-row").attr("id");
    var droppableId = $(this).attr("id");


    alert("Draggable ID: "+ draggableId+" Droppable ID: "+droppableId);
    ui.draggable.remove();
    $("#trash").html("<div><span><img style='height:100px; width:100px;'  src='/sis/images/trash.png' ></div>");
    var clickSound = new Audio('/sis/includes/trash.mp3');
    clickSound.play();

}});

draggableId 未定义

droppableId 是可丢弃 div 的 id。

如何获取.sortable-row tr的ID？？？

Answer 1

看到 drop 函数的那些参数了吗？ (ev, ui)?第二个是一组可拖动项目的 UI 处理程序，包括拖动项目本身。那是ui.helper

如果您使用 original 或 clone 作为拖动功能的参数，那么原始 ID 应该仍然存在。 （实际上，我自己喜欢使用about 属性来存储可能不唯一的ID——显示的一部分可能分布在一个页面上，使用typeof / about / property HTML5 属性可以让我了解我在一个页）。如果您为自定义表示提供了函数，则您有责任提供 ID（在上述 about 属性中，或在 HTML data 属性中）以便在放置时读取。