ondragstart 添加ghost image 在拖拽 问题

当我们想要在拖拽时添加自定义的ghost image的时候，我们可以用event.dataTransfer.setDragImage(element,x,y)来实现这个效果。

接下来我们顺着这个方法往下走：

   
  
  


  
拖动图片到矩形框中:
  

  ![](http://upload-images.jianshu.io/upload_images/4910610-39e145aaa136179f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这个时候我们设置好了，但是会不断多出一个元素来。这个时候我们将添加的元素移出到可是范围，并做好内存回收。你可以在ondragend的时候去把添加的元素删除掉。

function dragstart(ev) {
  ev.dataTransfer.setData("Text",ev.target.id);
  var ghost = document.createElement("div");
  ghost.id = 'GHOST_LABEL';
  ghost.style.backgroundColor = "#b8b8b8";
  ghost.style.color = "#414141";
  ghost.style.padding = "0 10px 0 15px";
  ghost.style.lineHeight = "24px";
  ghost.innerHTML = "this is a image!";
  ghost.style.display = "inline";
  ghost.style.position = "absolute";
  ghost.style.left = "-2000px";
  ghost.style.top = "0px";
  document.body.appendChild(ghost);
  ev.dataTransfer.setDragImage(ghost, 0, 0);
}

function dragend(ev) {
 document.body.removeChild(document.getElementById('GHOST_LABEL'))
}

到此我们就把效果做好了。如果不执行 document.body.appendChild(ghost)这一句，会出现拖拽不一定有效果或直接没有想要的效果。