发生拖动时，从拖动目标(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...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。