关于前端:拖拽原理DataTransfersetDragImage设置拖拽样式

57次阅读

共计 1531 个字符，预计需要花费 4 分钟才能阅读完成。

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