产生拖动时，从拖动指标(dragstart (en-US)事件触发的元素)生成半透明图像，并在拖动过程中追随鼠标指针。这个图片是主动创立的，你不须要本人去创立它。然而，如果想要设置为自定义图像，那么 DataTransfer.setDragImage() 办法就能派上用场。
图像通常是一个 <image> 元素，但也能够是<canvas> 或任何其余图像元素。该办法的x和y坐标是图像应该绝对于鼠标指针呈现的偏移量。
坐标指定鼠标指针绝对于图片的偏移量。例如，要使图像居中，请应用图像宽度和高度的一半。
通常在 dragstart (en-US) 事件处理程序中调用此办法。
拖拽重要属性: 产生拖拽的事件ondragstart 是否可拖拽属性draggable="true"
<!DOCTYPE html><html lang=en><title>Example of DataTransfer.setDragImage()</title><meta name="viewport" content="width=device-width"><style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; }</style><script>function dragstart_handler(ev) { console.log("dragStart"); // 设置拖动的格局和数据。应用事件指标的id作为数据 ev.dataTransfer.setData("text/plain", ev.target.id); // 创立一个图像并且应用它作为拖动图像 // 请留神： 扭转 "example.gif" 为一个曾经存在的图片 // 或者，一个还没有创立进去的图片，那么浏览器将会应用默认的拖动图片 // 译者注：默认的拖动图片与拖动对象没有分割。个别是一个小型文件图标 var img = new Image(); img.src = 'example.gif'; ev.dataTransfer.setDragImage(img, 10, 10);}function dragover_handler(ev) { console.log("dragOver"); ev.preventDefault();}function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); // 获取拖放指标的id数据 var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data));}</script><body><h1>Example of <code>DataTransfer.setDragImage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div></body></html>援用https://developer.mozilla.org...