html拖拽节点组件,前端拖拽组件优化

为什么弃用Html5 drag Api

之前我也用的Drag Api写了一个draggable组件，使用起来总觉得体验有点不好。

先来看有赞做的类似的拖拽UI组件，它引用的sortablejs库封装了Drag Api

1、拖拽的时候跟随鼠标的影子成为ghost，是Api自动生成的。但是由于这是一个很简洁的页面，背景全为白色在拖拽的时候其实很难看出拖到了哪里。Api虽然提供了e.dataTransfer.setDragImage(img, 0, 0)方法让我们在去改变这个ghost，但是设置的这个img必须是HTML img element、HTML canvas element，否则它必须是一个可见的节点。简单来说就是如果你设置的ghost不是canvas或者img元素，而是你自定义的html元素，那你必须把它append到document中。

document.getElementById("drag-with-create-add").addEventListener("dragstart", function(e) {

var crt = this.cloneNode(true);

crt.style.backgroundColor = "red";

document.body.appendChild(crt);

e.dataTransfer.setDragImage(crt, 0, 0);

}, false);

这种方式好像解