产生拖动时,从拖动指标 (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…