0

HTML5のプロパティを使用してドラッグ可能な DIV を作成するこの小さなスクリプトを作成しましたdragabble。ドラッグの最後に表示されるヘルパーを除いて、すべて正常に動作します。これを防ぐ方法はありますか？

http://jsfiddle.net/ubugnu/66AVB/

<div id="toBeDragged" style="position: absolute;" draggable="true">
  This text <strong>may</strong> be dragged.
</div>

<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
    X = event.offsetX;
    Y = event.offsetY;
});
document.getElementById('toBeDragged').addEventListener('drag', function(event) {
    this.style.left = event.pageX - X + 'px';
    this.style.top = event.pageY - Y + 'px';
});
</script>

編集: Firefox では動作しないようです! なぜそれが機能しないのか、誰にも考えがありますか？

4

2 に答える 2

0

ドラッグ開始に関するMDNドキュメントを確認してください。

Firefox がドラッグ情報を表示する方法を認識できるように、いくつかのドラッグ データを設定する必要があります。他のブラウザで動作するのは非標準です。

追加してフィドルを更新しました

event.dataTransfer.setData('text/html', 'This text <strong>may</strong> be dragged');

dragStart イベントに。

それがあなたが望む動作であるかどうかを確認してください：http://jsfiddle.net/66AVB/1/

于 2013-08-29T21:55:16.073 に答える
0

jquery を使用できる場合は、jquery ui を使用してみませんか。

http://jsfiddle.net/66AVB/2/

必要なすべてのコードは次のとおりです。

$('#toBeDragged').draggable();

于 2013-08-29T21:57:24.600 に答える