web-dev-qa-db-ja.com

Javascript ondrag、ondragstart、ondragend

divページで動的にレンダリングされたHTMLでondrag()と他のいくつかの関数を使用しようとしています。

これらのイベントはいずれも発生していないようで、エラーも発生しません。私もそれに関する多くの有用なドキュメントを見つけることができません。私はそれを間違って解釈していますか？これらのイベントを使用して、画面上でdivをドラッグする機能をスクリプト化できますか？

javascriptdrag-and-drop
11
Tom Gullen

このドキュメントをご覧ください： https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

注：すべてのブラウザーで機能するとは限りません。

クロスブラウザサポートが必要な場合は、jQueryを使用してください： http://jqueryui.com/demos/draggable/

jQueryの例：

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

<script>
    $(function() {
        $( "#draggable" ).draggable({
            drag: function(event, ui) {}
        });
    });
</script>

もう一つの例：

<div id="toBeDragged" draggable="true">
  This text <strong>may</strong> be dragged.
</div>

<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', 'This text may be dragged');
});
</script>
9
Tower

ドラッグはあまり使用していませんが、ドラッグの「編集アクション」だと思います。たとえば、テキストを選択してテキストボックス/テキストエリア内にドラッグします。

自分が求めている機能のために、独自のonmousedown()onmouseup()およびonmousemove()ハンドラーを実装する必要があるかもしれません。

1
Basic

これを行う簡単な方法は、jQuery UIを使用することです。動的なdivがレンダリングされた後に必ず使用してください。

$(document).ready(function () {
    $('.my_draggable_elements').draggable({
        drag: function(){
          // do something
        }
    });
});
0
Q_Mlilo

Divにコンテンツはありますか？この特定のイベントでドラッグされるのは要素自体ではないと思います。

0
Erik Reppen