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';});