HTML5ドラッグアンドドロップエフェクトの外観の制御

Question

HTML5ドラッグ＆ドロップAPIを使用して「ドラッグしているもの」の外観を制御する方法はありますか？

通常、ドラッグ可能なHTML要素は半透明になり、停止/ドロップするまでカーソルをたどります。要素内のどこからでもドラッグを開始できるようにコントロールしたいのですが、実際にドラッグを開始すると、カーソルがある場所にカーソルを合わせるだけの小さな画像しか表示されません。

具体的な例は次のとおりです。ドラッグするもののリスト。それぞれ小さなイメージで、ドラッグする側の名前のテキストです。画像やテキストの要素のどこにでもドラッグを開始できるようにしたいのですが、ドラッグし始めた場所からオフセットするのではなく、カーソルの直後とカーソルの直後に画像だけが表示されます。

これは、マウスカーソルのある場所に表示される非表示の要素、ドラッグを開始したときに実際にドラッグしたものの隠し要素、または古典的なJavaScriptのドラッグアンドドロップに頼る方法を考えることができます。

おかげ

Answer 1

私は.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/

Answer 2

のjQuery UIのthis一部を見てみましょう。それは、元の位置に元のままの状態で、ドラッグされた要素のゴーストを簡単に作成することができます。また、カーソルの後にカスタムヘルパーを指定することもできます。

Answer 3

StackOverflowのthis questionによると、ドラッグ可能なオブジェクトのスタイルを変更することはできませんが、ドラッグイメージを設定できます。ゴーストオブジェクトをドラッグしている間、画像が表示されます。

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

説明：私たちはdiv要素のIDを渡し、我々はそれをドラッグを開始する時期の画像が表示される場所の位置を与えているsetDragImage()関数を呼び出すdataTransferに

。

はもっとここにdataTransferについてを参照してください：仕様は、ブラウザ内のカスタマイズを一貫性のあるネイティブの行動を超える優先するように構築されていたよう Mozilla Developers - DataTransfer

Answer 4

残念ながら、それが見えます。

私たちは、研究の束を行なったし、ここで我々の調査結果をまとめ：

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

長いと短いが、しかし、（jQueryのUIのような）ヘルパーを使用したり、独自の圧延する場合、一般的に好ましいことがあります洗練された何かをする必要があります。

しかし、実際にネイティブの動作を使用して、setDragImage（）が適切でない場合は、いくつかの選択肢があります。

特に贅沢なアプローチの1つは、レンダラーをハイジャックしてスクリーンショット（！）をスタイルし、データURIを介して挿入します。

参照：http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

正気のアプローチは、単に絶対にマウスを追跡するためにゴースト要素を配置することであろう。しかし、それは、APIの外でドラッグ動作の中核部分を再実装するコードを書くことに戻ります。