克隆阴影在原生拖放HTML5

你好，我有本地拖动&在HTML5中的问题。克隆阴影在原生拖放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属性来创建移动效果，甚至有可能吗？这将是更好的选择（从优化视图），因为阴影已经跟踪光标，我需要什么。如果你第一次拖动它的一切都是okey，但在第二次尝试什么都没有发生，我不明白为什么。

编辑：

也许我写了无法理解。我想喜欢上这个网站的影响：

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

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

来源

2013-10-09 Sonny D

您可以明确设置你的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 
}

这里的一些documentation on the DataTransfer object。

来源

2013-10-10 13:17:29

你有权利。我怎么能错过这个功能。但当然并非如此简单，除Opera和IE之外无处不在。我自杀了。看在上帝的份上，即使两年后每个浏览器的工作方式不同，我们如何使用新功能HTML5。 –

[它支持IE 10+和Opera 12+]（http://caniuse.com/#feat=dragndrop）。确实如此， –

。他们支持拖放，但不支持setDragImage（）（我选择了OPERA 12.16）。所以，不管是因为我不喜欢FF效果，它以线性渐变淡出大拖物体。我需要留在自己的实施中。 –

克隆阴影在原生拖放HTML5

回答

相关问题