您好,我在 HTML5 中使用 native 拖放时遇到问题。
在我的网站中,我打开类似窗口弹出窗口的内容,我想允许用户更改该窗口的位置。到目前为止,我使用了自己的代码,工作完美,但现在是时候将其重写为原生 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属性来创建移动效果,甚至是可能的?这将是更好的选择(从优化 View 来看),因为阴影已经跟踪光标,这正是我所需要的。 如果您第一次拖动它,一切正常,但在第二次尝试时什么也没有发生,我不明白为什么。
编辑:
也许我写得难以理解。我想要像在这个网站上那样的效果:
我预测你会写那个检查源代码,我做到了。 我发现了什么?我讨厌互联网上的一些东西。即使我在 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
}
关于javascript - HTML5 原生拖放中的克隆阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19283543/