js拖拽时取消半透明元素

2021-06-15136次阅读javascript

当拖拽发生时,会生成拖拽目标的一个半透明图像(触发"{event("dragstart")}}" 事件的元素),并在拖拽过程中跟踪鼠标指针。这个图像是自动创建的,所以你不需要自己创建它。但是,你可以使用 setDragImage() 方法来自定义拖拽反馈图像。

event.dataTransfer.setDragImage(image, xOffset, yOffset);

这三个参数都是必要的。第一个是图像的引用。这个引用通常是一个 <img> 元素,但也可以是 <canvas> 或任何其他元素。生成的反馈图像就是该图像在屏幕上的样子,以图像原始的大小绘制。setDragImage() 方法的第二、三个参数是图像位置相对于鼠标指针位置的偏移量。

也可以使用不在文档中的图像和画布。这种技术在使用 canvas 元素绘制自定义的拖拽反馈图像时非常有用,如下面的例子:

function dragWithCustomImage(event) {
  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
  canvas.width = canvas.height = 50;

  var ctx = canvas.getContext("2d");
  ctx.lineWidth = 4;
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.moveTo(0, 50);
  ctx.lineTo(50, 0);
  ctx.stroke();

  var dt = event.dataTransfer;
  dt.setData('text/plain', 'Data to Drag');
  dt.setDragImage(canvas, 25, 25);
}


element.ondragstart = event=>{
    dragWithCustomImage(event);
}

element.ondrag = event=>{
    dragWithCustomImage(event);
}

element.ondragend = event=>{
    //拖拽松开鼠标时,要执行的操作事务代码
}

在这个例子中,我们做了一个是画布的拖拽图像。当画布宽 50 像素,高 50 像素时,我们使用一半的偏移量(25 和 25),这样鼠标指针即为图像中心。

图片拖拽透明阴影不妨添加css样式pointer-events试试:

pointer-events: none;

 

原文:https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations

 

上一篇: javascript生成随机字符串  下一篇: css进度按钮样式  

js拖拽时取消半透明元素相关文章