DataTransfer.setDragImage()

 

发生拖动时,从拖动目标(dragstart事件触发的元素)生成半透明图像,并在拖动过程中跟随鼠标指针。这个图片是自动创建的,你不需要自己去创建它。然而,如果想要设置为自定义图像,那么 DataTransfer.setDragImage() 方法就能派上用场。

图像通常是一个 <image> 元素,但也可以是<canvas> 或任何其他图像元素。该方法的x和y坐标是图像应该相对于鼠标指针出现的偏移量。

坐标指定鼠标指针相对于图片的偏移量。例如,要使图像居中,请使用图像宽度和高度的一半。

通常在  dragstart 事件处理程序中调用此方法。

语法

void dataTransfer.setDragImage(img, xOffset, yOffset);

  参数

img
用于拖曳反馈图像的图像 Element 元素。
xOffset
使用 long 指示相对于图片的横向偏移量
yOffset
使用 long 指示相对于图片的纵向偏移量

 

返回值

void
 

举个例子

 这个例子展示如何使用 setDragImage() 方法。请注意,此例子引用了命名为 example.gif 的图片文件。如果此文件存在,它将被用作拖动图像,如果此文件不存在,浏览器会使用其默认的拖动图像。

<!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>

规范

Specification Status Comment
HTML Living Standard
setDragImage()
Living Standard  
HTML 5.1
setDragImage()
Recommendation Not included in W3C HTML5 Recommendation

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 3.5 未实现 12 3.1
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 未实现 未实现 未实现 10 未实现 未实现

参考链接

文档标签和贡献者

 此页面的贡献者: weiqinl
 最后编辑者: weiqinl,