dataTransfer
尝试在拖放序列期间将jQuery 对象传递给属性。将属性添加到jQuert.event.props
数组后,我可以分配它,但它在drop
事件期间返回 undefined on。不确定我在这里缺少什么 - 看起来真的很简单。
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'));
});