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

Question

有一个列表/一个table项（我相信现在不重要了）。使用 jQuery 使它们可拖动。我需要设置一些与被拖动的项目元素关联的数据，并能够从可放置元素的 "drop" 处理程序中的事件中提取它。

我试图将 dataTransfer 属性与它的 setData() 函数一起使用，但属性无法在两侧使用。

这是一个简单的例子：http://jsfiddle.net/x52ue9ae/1/

Answer 1

我认为您不能使用 dataTransfer 是 html5 拖放功能，jQuery DnD 不使用它。

您可以使用 data api 将数据存储在被拖动的元素中，并在放置处理程序中使用它来访问它，例如

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

演示：Fiddle

Answer 2

问题是这不是 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/

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

jQuery DnD. How to pass data associated with an element being dragged?

jquery

drag-and-drop