jQuery 将元素传递给 dataTransfer 属性

Question

尝试在拖放序列期间将 jQuery 对象传递到 dataTransfer 属性。将属性添加到 jQuert.event.props 数组后，我可以分配它，但它在 drop 事件期间返回 undefined。不确定我在这里缺少什么 - 看起来非常简单。

Javascript:

function dragClip(clip, event){

    event.dataTransfer.el = clip;

    /* Console confirms event.dataTransfer.el is the jQuery object */
}

function dropClip(target, event){

    target.append(event.dataTransfer.el);

    /* event.dataTransfer.el no longer has the object... where'd it go?? */
}

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        dropClip($(this), event);
    });

$('.clip').bind('dragstart', function(event){

    dragClip($(this), event);
});

<小时/>

更新:

重写以消除冗长。其中包含了其他内容，但匿名函数就可以了:

jQuery.event.props.push('dataTransfer');

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        $(this).append(event.dataTransfer.el);
    });

$('.clip').bind('dragstart', function(event){

    event.dataTransfer.el = $(this);
});

<小时/>

更新

根据 @barney 的最终答案，我的最终工作代码。我注意到使用原始事件不允许我将对象作为数据传递，因此我应用了 ID 并在放置时重建了 jQuery 对象。还通过删除声明的函数来收紧一切。更少的代码，相同的结果。

$('#titles')
    .bind('dragenter dragover', false)
    .bind('drop', function(event){

        $(this).append($('#' + event.originalEvent.dataTransfer.getData('clip')));
    });

$('.clip')
    .bind('dragstart', function(event){

        event.originalEvent.dataTransfer.setData('clip', $(this).attr('id'));
    });

Answer 1

就我个人而言，我尝试尽可能少地使用 jQuery 内部机制，并尽可能提取原始事件对象。过去使用拖放时，我总是使用 event.originalEvent.dataTransfer。