HTML5拖放 - 没有透明度？

Question

当我在页面上拖放一个元素时，元素变成了“幻影”。基本上它有一些透明度的价值。

有没有办法让它变成opacity: 1;？

Answer 1

看起来它无法做到的。被拖拽的元素被放入容器中，它拥有自己的，不透明度小于1的容器。这意味着虽然可以降低拖动元素的不透明度，但不能使其高于封装元素的不透明度。

它可能可能会覆盖此元素的默认浏览器设置，但由于在拖动过程中没有任何内容被添加到DOM，所以最好是非常棘手。

Answer 2

如果您使用JavaScript，然后在处理dragStart事件包括风格不透明度设置为1，例如功能：

function dragStartHandler(e) { 
    this.style.opacity = '1.0'; 
} 

Answer 3

如前所述，这是通过浏览器处理的 - >你不能改变这种行为，但是如果你确实需要这种效果，当鼠标停止时（鼠标拖动）尝试寻找鼠标移动，检查选择了哪个元素并在您的鼠标光标后面随时创建副本。看起来像jQuery的理想工作;）

但如果你不需要它拼命我不会尝试改变浏览器的默认值，因为人们习惯了它，并可能会困惑，如果在另一个行为（未知）的方式

Answer 4

尽管这可能不是问题的真正解决方案，但我有一个想法，可能会起作用，至少我在一段时间之前在我的一个GWT项目中测试了它，并且它工作正常，所以我猜测它可能工作在原生JS以及虽然我没有代码示例：

1. 而不是使用拖动功能，创建一个新的元素equ也就是应该在要拖动的元素的原始位置拖动的元素。现在要拖动的原始元素不可见。实现恢复原信号的逻辑，并在鼠标不再按下时立即删除克隆。

2. 使克隆元素保持鼠标的位置。删除克隆的事件还要检查鼠标是否被释放，而要拖动的元素位于可拖动原始元素的区域上方。

3. 如果为true，则删除克隆并将原始元素移动到目标容器。

肯定是有很多的调整工作，在CSS和JS做的一样好，但它可能是压倒JS标准的一招。

Answer 5

我认为透明度不是来自web内容，而是来自浏览器和操作系统。 如果你想改变不透明度，你必须调整或破解浏览器和操作系统

Answer 6

如果你不是从网页外部（从操作系统）拖放元素，那么你可以很容易地解决这个问题通过实施你自己的拖放。有许多纯JavaScript拖放的例子，它们将在HTML5环境中完美运行，并且完全可以由您自定义。

答案：（使用旧的方式）

Answer 7

建议，做到以下几点，现在该我米使用jQuery，试试吧，说一些不会工作之前，我们在这里不是给出答案，但在这里指出你在正确的方向。

function dragStartHandler(e) { 
    $("span.{CLASS}")addClass('overdrag'); 
} 

，那么你需要拿出客场告诉它已经采空draging和位置投进，然后RemoveClass（“overdrag”）;

这不难做到，所以我认为你应该可以做到。我要感谢@DonaldHuckle，因为这是他的解决方案，而不是我的解决方案。

Answer 8

正如其他人的建议，你将需要某种机制将：

1. 隐藏正在拖动的元素。
2. 对被拖动的元素进行克隆。
3. 将克隆放置在被拖动的元素位置。
4. 收听drag事件以定位克隆元素。

在实践中，看起来是这样的：

function Drag (subject) { 
    var dative = this, 
     handle, 
     dragClickOffsetX, 
     dragClickOffsetY, 
     lastDragX, 
     lastDragY; 

    subject.draggable = true; 

    dative.styleHandle(subject); 

    subject.addEventListener('dragstart', function (e) {  
     handle = dative.makeHandle(subject); 

     dragClickOffsetX = e.layerX; 
     dragClickOffsetY = e.layerY; 

     this.style.opacity = 0; 
    }); 

    subject.addEventListener('drag', function (e) { 
     var useX = e.x, 
      useY = e.y; 

     // Odd glitch 
     if (useX === 0 && useY === 0) { 
      useX = lastDragX; 
      useY = lastDragY; 
     } 

     if (useX === lastDragX && useY === lastDragY) { 
      return; 
     } 

     dative.translate(useX - dragClickOffsetX, useY - dragClickOffsetY, handle, subject); 

     lastDragX = useX; 
     lastDragY = useY; 
    }); 

    subject.addEventListener('dragend', function (e) { 
     this.style.opacity = 1; 

     handle.parentNode.removeChild(handle); 
    }); 
}; 

/** 
* Prevent the text contents of the handle element from being selected. 
*/ 
Drag.prototype.styleHandle = function (node) { 
    node.style['userSelect'] = 'none'; 
}; 

/** 
* @param {HTMLElement} subject 
* @return {HTMLElement} 
*/ 
Drag.prototype.makeHandle = function (subject) { 
    return this.makeClone(subject); 
}; 

/** 
* Clone node. 
* 
* @param {HTMLElement} node 
* @return {HTMLElement} 
*/ 
Drag.prototype.makeClone = function (node) { 
    var clone; 

    clone = node.cloneNode(true); 

    this.styleClone(clone, node.offsetWidth, node.offsetHeight); 

    node.parentNode.insertBefore(clone, node); 

    return clone; 
}; 

/** 
* Make clone width and height static. 
* Take clone out of the element flow. 
* 
* @param {HTMLElement} node 
* @param {Number} width 
* @param {Nubmer} height 
*/ 
Drag.prototype.styleClone = function (node, width, height) { 
    node.style.position = 'fixed'; 
    node.style.zIndex = 9999; 
    node.style.width = width + 'px'; 
    node.style.height = height + 'px'; 
    node.style.left = '-9999px'; 

    node.style.margin = 0; 
    node.style.padding = 0; 
}; 

/** 
* Used to position the handle element. 
* 
* @param {Number} x 
* @param {Number} y 
* @param {HTMLElement} handle 
* @parma {HTMLElement} subject 
*/ 
Drag.prototype.translate = function (x, y, handle, subject) { 
    handle.style.left = x + 'px'; 
    handle.style.top = y + 'px'; 
}; 

开始安装一个元素：

new Drag(document.querySelector('.element')); 

而你有一个工作的阻力，并完全控制的外观下降可拖动的元素。在上面的例子中，我克隆了原始元素以将其用作句柄。您可以扩展Drag函数以自定义句柄（例如，使用图像来表示可拖动元素）。

太激动之前，有几件事情要考虑：

• WHATWG拖放不与移动合作，HTML5 Drag & Drop for Mobile
• 没有办法捕捉“手柄释放”事件，请参阅解决方案的链接：How to get mouseup event after native drag event?。

更新：

我写了一个库WHATWG拖放机制，https://github.com/gajus/pan的触摸功能的实现。

Answer 9

请参阅该工作fiddle

我在鬼的地方做一个不透明的图像解决方案，它在chrome.But工作正常，其在FF.I不工作需要一些身体帮我做它在Firefox和其他浏览器中工作。 步骤 1.我们将制作自己的鬼影图像，并将其设置为拖动图像。

document.addEventListener("dragstart", function(e) { 
var img = document.createElement("img"); 
img.src = "img/hackergotchi-simpler.png"; 
e.dataTransfer.setDragImage(img, 5000, 5000);//5000 will be out of the window 
}, false); 

2。我们将克隆的图像，并将其追加到ondrag当DOM

var crt,dragX,dragY; 
function drag(ev) { 
    crt = ev.target.cloneNode(true); 
    crt.style.position = "absolute"; 
    document.body.appendChild(crt); 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

3.Then我们将尽克隆与移动光标

document.addEventListener("dragover", function(ev){ 
ev = ev || window.event; 
dragX = ev.pageX; dragY = ev.pageY; 
crt.style.left=dragX+"px";crt.style.top= dragY+"px"; 
console.log("X: "+dragX+" Y: "+dragY); 
}, false); 

4.At最后我们将克隆的知名度去

document.addEventListener("dragend", function(event) {crt.style.display='none';});