web-dev-qa-db-ja.com

HTML5のドラッグアンドドロップ効果の外観の制御

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

通常、ドラッグ可能なHTML要素は、半透明になり、停止/ドロップするまでカーソルを追跡します。要素内のどこからでもドラッグを開始できるように制御したいのですが、実際にドラッグを開始すると、カーソルの位置に正確にカーソルを追うことができます。

実際の例は、次のとおりです。ドラッグするもののリスト。それぞれが小さな画像であり、横にドラッグするものの名​​前のテキストです。画像またはテキスト上の要素の任意の場所でドラッグを開始できるようにしたいのですが、ドラッグしたところからオフセットするのではなく、カーソルのすぐ下にあるのは画像だけです。

私はそれをだますいくつかの方法（マウスカーソルがある場所、ドラッグを開始すると実際にドラッグする場所に表示される非表示の要素）を考えたり、従来のJavaScriptのドラッグアンドドロップに頼ったりすることができます。

ありがとう

htmldrag-and-dropdraggableappearance
20
user358089

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

22
Sergio

残念ながら、ブラウザ内でのカスタマイズよりも一貫したネイティブ動作を優先するように仕様が構築されているようです。

一連の調査を行い、調査結果をここにまとめました。

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

ただし、長くて短いのは、ヘルパー（jQuery UIなど）を使用するか、独自のものをローリングする方が、洗練された何かをする必要がある場合は一般的に望ましいことです。

それでも、ネイティブの動作を実際に使用したい場合で、setDragImage（）が適切でない場合は、いくつかの代替手段があります。

特に贅沢なアプローチの1つは、レンダラーをハイジャックして、スタイルを設定したい要素のスクリーンショット（！）を作成し、データURIを介して挿入することです。

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

より賢明なアプローチは、マウスに追従するようにゴースト要素を単に絶対的に配置することです。しかし、それではAPIの外でドラッグ動作のコア部分を再実装するコードを書くことに戻ります。

9
Dean Hunt

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

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

説明：

dataTransferでsetDragImage()関数を呼び出し、divのIDを渡して、ドラッグを開始したときに画像が表示される位置を指定します。

dataTransferの詳細については、こちらをご覧ください： Mozilla Developers-DataTransfer

2
Mohammad Areeb Siddiqui