在HTML5中的本机拖放中克隆阴影

Clone shadow in native Drag&Drop in HTML5

本文关键字：拖放 阴影 本机 HTML5      更新时间：2023-09-26

您好，我在HTML5中使用本机拖放时遇到问题。

在我的网站上，我打开了类似窗口弹出窗口的东西，我想允许用户更改该窗口的位置。到目前为止，我使用了自己的代码，工作完美，但现在是时候将其重写为本机HTML5了。

在这里你可以找到我现在使用的代码：http://jsfiddle.net/aapbf/6/

var box = document.getElementById('box');
function startDrag(e){
    this.mouse = {x: e.clientX,y: e.clientY};
    this.actual = {x: this.style.left, y: this.style.top};
}
function nowDrag(e){
   this.style.left = this.actual.x+e.clientX-this.actual.x+'px';
   this.style.top = this.actual.y+e.clientY-this.actual.y+'px';
   this.textContent = e.clientX; 
}
function handleDrop(){
    this.style.left = this.actual.x+e.clientX-this.actual.x+'px';
    this.style.top = this.actual.y+e.clientY-this.actual.y+'px';
}
box.addEventListener('drag',nowDrag,false);
box.addEventListener('dragstart',startDrag,false);
box.addEventListener('drop', handleDrop, false);

如何制作的想法是好的(更改 css 属性(？如何避免创建拖动对象的阴影克隆？或者如何使影子克隆对象是对象的相同克隆，所以我不需要更改css属性来创建移动效果，甚至有可能？这将是更好的选择(从优化视图(，因为阴影已经跟踪光标，我需要什么。如果你第一次拖动它，一切都很好，但在第二次尝试中什么也没发生，我不知道为什么。

编辑：

也许我写得听不懂。我想像在这个网站上一样效果：

https://web.archive.org/web/20151230131916/https://developer.cdn.mozilla.net/media/uploads/demos/D/a/Darbicus/067780cbcb0cfea29e59def1e1acbc3c/jigsaw-puzzle_1376833848_demo_package/index.html

我

预测你写了那个检查源代码，我做到了。我发现了什么？我在互联网上讨厌的东西。即使我在 DRAG&DROP 部分找到了这个例子，也没有任何关于它的内容，他们使用自己的代码。 这个例子在那里做什么，我不知道。综上所述：主要问题是影子克隆拖动对象。

您可以在

dragstart处理程序中显式设置拖动(或"重影"(图像：

function startDrag(e){
    this.mouse = {x: e.clientX,y: e.clientY};
    this.actual = {x: this.style.left, y: this.style.top};
    e.dataTransfer.setDragImage(this, 0, 0); // set the drag image to be the element itself
}

下面是有关DataTransfer对象的一些文档。

相关文章：