web-dev-qa-db-ja.com

FirefoxでHTML5の<div>をドラッグ可能にする方法は？

私はHTML5の機能をいじっていますが、div（および記事、セクションなどの類似のコンテナー）をドラッグ可能にしたいと思います。次のコードを検討してください。

<!DOCTYPE html>
<html>
<head>
  <title>A Simple Draggable Object</title>
</head>

<body>
    <h1>Test #1: A Simple Draggable Object</h1>
    <div draggable="true">This text should be draggable.</div>
</body>
</html>

OS Xで次のブラウザをテストしました：Chrome 7.0およびSafari 5.0.2ではテキストをドラッグできますが、Firefox 3.6および4.0b6ではテキストをドラッグしたりマークしたりできません（通常のテキストのように）これはバグですか、それとも機能ですか？Firefoxでこれらのタグをドラッグできるようにするにはwithout jQueryを使用しますか？

firefoxhtmldraggable
28
HdM

HTML5 Doctor によると、これはJSの助けがなければFirefoxでは機能しません。

HTML 5仕様では、問題の要素のマークアップに次の属性を追加するだけの簡単なものである必要があるとしています。

draggable="true"

ただし、これはSafariまたはFirefoxでは完全に機能しません。 Safariの場合、次のスタイルを要素に追加する必要があります。

[draggable=true] {
  -khtml-user-drag: element;
}

これでSafariでの作業が始まり、ドラッグするとdataTransferオブジェクトにデフォルトの空の値が設定されます。ただし、Firefoxでは、手動で要素にデータを設定しない限り、要素をドラッグできません。これを解決するには、dragstartイベントハンドラーが必要です。ドラッグするデータを次のように指定します。

var dragItems = document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(dragItems[i], 'dragstart', function (event) {
    // store the ID of the element, and collect it on the drop later on

    event.dataTransfer.setData('Text', this.id);
  });
}
63
Skilldrick