DataTransfer.setDragImage()

2019-10-7 21:25| 作者: admin| 查看: 157| 评论: 0|来自: 蚂蚁部落

setDragImage()方法用于设置拖动时自定义提示图像。

当源元素开始被拖动时,默认生成半透明的图像,使用此方法可以自定此图像。

虽然简单,不过仅以语言描述难于理解,后面会有详细代码演示。

特别说明:此方法必须在dragstart事件处理函数中调用,否则无效。

语法结构:

[JavaScript] 纯文本查看 复制代码
dataTransfer.setDragImage(img, xOffset, yOffset);

参数解析:

(1).img:自定义的图像。

(2).xOffset:图像相对于鼠标指针位置在x轴方向的便宜量。

(3).yOffset:图像相对于鼠标指针位置在y轴方向的便宜量。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
p{
  width:100px;
  height:50px;
  background-color:red;
}
#box {
  width:200px; 
  height:100px;
  background-color:#ccc;
}
.over {
  border: 1px dashed #000;
  transform: scale(0.8, 0.8);
}
</style>
<script>
window.onload = () =>{
  let odiv=document.getElementById("box");
  let op=document.getElementById("p");

  op.ondragstart = (ev) => {
    ev.dataTransfer.setData("Text",ev.target.id);
  }

  odiv.ondragenter = (ev) => {
    ev.target.classList.add('over');
  }

  odiv.ondragover = (ev) => {
    ev.preventDefault();
  }

  odiv.ondragleave = (ev) => {
    ev.target.classList.remove('over');
  }

  odiv.ondrop = (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    ev.target.classList.remove('over');
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
}
</script>
</head>
<body>
<p draggable="true" id="p"></p>
<div id="box"></div>
</body>
</html>

上述代码并没有自定义提示拖动提示图像。

可以看到当开始拖动的时候,浏览器会自定生成一个具有透明的提示图像。

a:3:{s:3:\"pic\";s:43:\"portal/201910/07/212647oqtfyfb5fp3358gp.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

我们可以自定义此默认图像,看如下代码:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
p{
  width:100px;
  height:50px;
  background-color:red;
}
#box {
  width:200px; 
  height:100px;
  background-color:#ccc;
}
.over {
  border: 1px dashed #000;
  transform: scale(0.8, 0.8);
}
</style>
<script>
window.onload = () =>{
  let odiv=document.getElementById("box");
  let op=document.getElementById("p");
  let img = new Image(); 
  img.src = 'static/image/common/online_member.gif'; 

  op.ondragstart = (ev) => {
    ev.dataTransfer.setData("Text",ev.target.id);
    ev.dataTransfer.setDragImage(img, 30, 30);
  }

  odiv.ondragenter = (ev) => {
    ev.target.classList.add('over');
  }

  odiv.ondragover = (ev) => {
    ev.preventDefault();
  }

  odiv.ondragleave = (ev) => {
    ev.target.classList.remove('over');
  }

  odiv.ondrop = (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    ev.target.classList.remove('over');
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
}
</script>
</head>
<body>
<p draggable="true" id="p"></p>
<div id="box"></div>
</body>
</html>

上述代码自定义了拖动提示图片,效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201910/07/212710m7oq72iklllocxdk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对上述代码进行一下简单分析:

(1).setDragImage()方法第一个参数是自定义的拖动提示图片。

(2).第二个和第三个参数规定鼠鼠标指针举例图片左上角的偏移量。

(3).图片左上角为坐标系原点,向左为x轴正向,向下为y轴正向。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部