jQuery将元素传递到dataTransfer属性
在拖放序列期间,尝试将jQuery对象传递给jQuery将元素传递到dataTransfer属性,jquery,events,object,drag-and-drop,data-transfer,Jquery,Events,Object,Drag And Drop,Data Transfer,在拖放序列期间,尝试将jQuery对象传递给dataTransfer属性。在将属性添加到jqueryt.event.props数组之后,我可以分配它,但是在drop事件期间,它返回undefined on。不确定我在这里遗漏了什么-看起来很简单 Javascript: function dragClip(clip, event){ event.dataTransfer.el = clip; /* Console confirms event.dataTransfer.el i
dataTransfer
属性。在将属性添加到jqueryt.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并在drop上重建了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'));
});
就我个人而言,我尽量少使用jQuery内部构件,并尽可能提取原始事件对象。过去使用拖放时,我总是使用
event.originalEvent.dataTransfer
是的,我考虑过这样的事情。这太奇怪了——我应该能够将jquery对象附加到dataTransfer属性。我可以在vanilla JS中实现这一点,但不确定如果将dataTransfer添加到事件属性arrayPersonally中,为什么它在jQuery中的工作方式会有所不同。我尽量少使用jQuery内部构件。过去使用拖放时,我总是使用event.originalEvent.dataTransfer
。有趣的是,使用它而不是将dataTransfer添加到jQuery中。我接受了你的回答,非常感谢你的帮助。如果您能在event.originalEvent上附上您的答案和您的建议,以供其他人参考,我将不胜感激。这对我很有帮助。