拖拽原理,DataTransfer.setDragImage设置拖拽样式

发生拖动时,从拖动目标(dragstart (en-US)事件触发的元素)生成半透明图像,并在拖动过程中跟随鼠标指针。这个图片是自动创建的,你不需要自己去创建它。然而,如果想要设置为自定义图像,那么 DataTransfer.setDragImage() 方法就能派上用场。
图像通常是一个 元素,但也可以是 或任何其他图像元素。该方法的x和y坐标是图像应该相对于鼠标指针出现的偏移量。
坐标指定鼠标指针相对于图片的偏移量。例如,要使图像居中,请使用图像宽度和高度的一半。
通常在 dragstart (en-US) 事件处理程序中调用此方法。
拖拽重要属性: 发生拖拽的事件ondragstart 是否可拖拽属性draggable="true"

Example of DataTransfer.setDragImage() - 锐客网 div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } Example of DataTransfer.setDragImage() 【拖拽原理,DataTransfer.setDragImage设置拖拽样式】Select this element, drag it to the Drop Zone and then release the selection to move the element.
Drop Zone

引用 https://developer.mozilla.org...

    推荐阅读