在做一個拖拽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>