jquery里使用“拖拽”时,提示:Uncaught TypeError: Cannot read property setData of undefined的解决方法亲测 原创

文章标签: 拖拽 event
  • :
  • 03-16 16:15
  • :
  • 33次
  • :
  • 0条
  • 1赞

简介在jquery里使用拖拽功能时,提示Uncaught TypeError: Cannot read property 'setData' of undefined时的解决方法。

站长最近要做一个“上传”的小功能,想把HTML5的“拖拽”功能添加进去,参考了网上的一些实例代码,但找到的是JS版的,但站长我有“强迫症”,想使用jquery版的,然后就开始了改造的过程,但在中间竟然莫名其妙的出现了一个错误提示。

原来的代码为:

<p id="drag" draggable="true" ondragstart="drag(event)">可拖拽移动的段落</p>
function drag(e){
    e.dataTransfer.setData("Text",e.target.id);
}

代码很简单,所以站长就直接把改成了jquery:

<p id="drag" draggable="true">可拖拽移动的段落</p>
$("#drag").on("dragstart",function(e){
    e.dataTransfer.setData("Text",e.target.id);
});

但是在测试的时候就出现了这个错误提示:Uncaught TypeError: Cannot read property 'setData' of undefined

很直接的,站长就想到了可能是jquery里的event和js里的event不一样,所以就上网查找资料,果然是不一样的。

大家可以自己测试一下,直接用console.log()来把两个event打印出来对比一下就清楚了。

所以要解决也很简单,只要把jquery里的event对象换成windows的原生event对象就行了:

<p id="drag" draggable="true">可拖拽移动的段落</p>
$("#drag").on("dragstart",function(e){
    e.originalEvent.dataTransfer.setData("Text",e.target.id);
});

event.originalEvent属性 : 该方法的作用是指向原始的事件对象。



您正在找的文章可能是: