可视化拖拽添加元素

[liukexina]

第一步：确定什么元素是可拖拽的 让一个元素被拖拽需要添加 draggable 属性，再加上全局事件处理函数ondragstart 第二步：定义一个放置区 当拖拽一个项目到 HTML 元素中时，浏览器默认不会有任何响应。想要让一个元素变成可释放区域，该元素必须设置 ondragover 和 ondrop 事件处理程序属性

🌰：

function dragstart_handler(ev) {
 // 当用户开始拖拽一个元素或选中的文本时触发
}
function dragover_handler(ev) {
 ev.preventDefault();
 // 当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）
}
function drop_handler(ev) {
 ev.preventDefault();
 // 当元素或选中的文本在可释放目标上被释放时触发
}

<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>

[liukexina]

其他： 定义拖拽图像： 拖拽过程中，浏览器会在鼠标旁显示一张默认图片。当然，应用程序也可以通过 setDragImage() 方法自定义一张图片

function dragstart_handler(ev) {
  var img = new Image();
  img.src = 'example.gif';
  ev.dataTransfer.setDragImage(img, 10, 10);
}

定义拖拽效果： dropEffect 属性用来控制拖放操作中用户给予的反馈。它会影响到拖拽过程中浏览器显示的鼠标样式。比如，当用户悬停在目标元素上的时候，浏览器鼠标也许要反映拖放操作的类型。

有 3 个效果可以定义：

copy 表明被拖拽的数据将从它原本的位置拷贝到目标的位置。 move 表明被拖拽的数据将被移动。 link 表明在拖拽源位置和目标位置之间将会创建一些关系表格或是连接。 在拖拽过程中，拖拽效果也许会被修改以用于表明在具体位置上具体效果是否被允许，如果允许，在该位置则被允许放置。

function dragstart_handler(ev) {
  ev.dataTransfer.dropEffect = "copy";
}