控制HTML5拖放效果的外觀

有沒有一種方法可以使用HTML5拖放API控制「正在拖動的內容」的外觀？控制HTML5拖放效果的外觀

通常情況下，任何HTML元素可拖拽就是變成半透明直到您停止/下降跟隨光標。我想控制它，這樣我就可以從元素內的任何位置開始拖動，但是當您真正開始拖動時，我可以在光標後面只有一個小圖像，光標正好位於該光標所在的位置。

的實際的例子是：事情要拖動列表，每一個都是小圖片和一些文字，你會被拖動到它側面東西的名字。我希望能夠在圖像或文本上的元素的任何位置開始拖動，但只有圖像跟隨您的光標，並直接位於光標下方，而不是從您開始拖動它的位置偏移。

我能想到的一些方法來誘騙（出現在您的鼠標光標，當你開始拖就是你居然拖到一個隱藏的元素），或求助於經典的Javascript拖放。

感謝

2013-06-11 Christopher Simpson

我想.setDragImage(element, x, y);可能是你在找什麼。

function handleDragStart(e) { 
    var dragIcon = document.createElement('img'); 
    dragIcon.src = 'http://...'; 
    dragIcon.width = 100; 
    e.dataTransfer.setDragImage(dragIcon, x, y); 
} 

this.addEventListener('dragstart', handleDragStart, false);

這裏舉例：jsfiddle.net/cnAHv/

來源

2013-06-17 19:21:03 Sergio

還要考慮所有可能的自定義鏈接。真的很有幫助： http://www.kryogenix.org/code/browser/custom-drag-image.html –

看看jQuery用戶界面的this一部分。它允許您輕鬆創建拖動元素的幻影，同時原始圖像保留在其原始位置。您也可以指定一個自定義'助手'來跟隨光標。

來源

2013-06-20 19:40:51 MTCoster

據this question在計算器上，我們不能改變拖動對象的風格的同時拖動它，但是我們可以設置一個拖動圖像。這會在拖動鬼物體時導致圖像出現。

event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);

說明：

上dataTransfer我們稱之爲setDragImage()函數中，我們通過DIV的ID，並給出該圖像時會出現，我們將開始拖動它的位置。

查看更多有關dataTransfer這裏： Mozilla Developers - DataTransfer

來源

2013-06-24 13:22:49

不幸的是，它看起來像規範的建立是爲了有利於一致本土的行爲在瀏覽器內的定製。

我們做了一大堆的研究，在這裏總結，我們發現：

https://www.inkling.com/engineering/native-html5-drag-drop/

的長與短，雖然是使用輔助（如jQuery UI）或滾動你自己的是，如果一般可取你需要做任何複雜的事情。

不過，如果你真的想使用本機的行爲和setDragImage（）是不夠的，有幾個選擇。

一個特別奢侈的做法可能涉及劫持渲染器創建一個屏幕截圖（！）的元素，如你想要的樣式，然後通過數據URI插入它。

參見：http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

一個理智的做法是簡單地進行絕對定位鬼元件跟隨鼠標。但是，這又讓我們回到編寫代碼來重新實現API以外的拖動行爲的核心部分。

來源

2013-11-09 08:38:12

好文章！太糟糕了沒有社區建立和維護JS庫，照顧所有這一切，沒有任何本地幫助... – BenRacicot

是啊，你還沒有開源任何代碼 – asdfasdfads

第一個鏈接對我來說是打破了。 – brandaemon

控制HTML5拖放效果的外觀

回答

相關問題