jquery中获取原生事件对象来解决html5中拖拽事件的bug

在做一个拖拽demo（九宫格拼图）时，遇到一个bug,当拖动一张图片1到另外一张图片2的位置时，两个位置的图片都变成了图片2，代码如下

<script type="text/javascript">
(function($){
  var dragSrc;
$('li').each(function(index,ele){
$(ele).on("dragstart",function(e){
dragSrc=this;
e.dataTransfer.setData("text/html",this.innerHTML);
}).on(dragover",function(e){
 e.preventDefault();
}).on("drop",function(e){
id(dragSrc!=this){
 dragSrc.innerHTNL=this.innerHTML;
this.innerHTML=e.dataTransfer.getData("text/html");
}
});
})
})
</script>

原因是通过jquery（$(ele)）绑定dragstart事件之后，dataTransfer就不是在对象e上了，而是在e的原始事件originalEvent上，jquery里面的事件对象e其实是对原始事件的一个封装，故修改代码，bug修复

<script type="text/javascript">
(function($){
  var dragSrc;
$('li').each(function(index,ele){
$(ele).on("dragstart",function(e){
dragSrc=this;
e.originalEvent.dataTransfer.setData("text/html",this.innerHTML);
}).on(dragover",function(e){
 e.preventDefault();
}).on("drop",function(e){
id(dragSrc!=this){
 dragSrc.innerHTNL=this.innerHTML;
this.innerHTML=e.originalEvent.dataTransfer.getData("text/html");
}
});
})
})
</script>