jQuery DnD。如何传递与被拖动的元素关联的数据？

Question

有一个项目列表/表格(我相信现在没关系)。它们通过使用 jQuery 变得可拖动。我需要设置一些与被拖动的项目元素关联的数据，并能够从可放置元素的“放置”处理程序中的事件中提取它。

我尝试将 dataTransfer 属性与其 setData() 函数一起使用，但该属性在双方均不可用。

这是简单的示例:http://jsfiddle.net/x52ue9ae/1/

Answer 1

问题是这不是 HTML5 拖放，jQueryUI 使用 mousedown/mousemove/mouseup 事件实现纯 JavaScript 拖放。根本不涉及dataTransfer机制。

相反，您应该使用 jQuery 将数据属性设置为拖动元素:

$(function(){
    $(".draggable").draggable({
        start: function(e) {
            $(this).data('id', 3);
        }
    });
    $(".droppable").droppable({
        drop: function(e, ui) {
            var id = ui.draggable.data('id');
            console.log(id);
        }
    })
});

演示: http://jsfiddle.net/x52ue9ae/2/