最新のWeb開発のチュートリアル
 

ondragイベント

<イベントオブジェクト

ときのJavaScriptを実行し<p>要素がドラッグされています。

<p draggable="true" ondrag="myFunction(event)">Drag me!</p>
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。


定義と使用法

要素またはテキスト選択がドラッグされているときondragイベントが発生します。

ドラッグ&ドロップは、HTML5で非常に共通の特徴です。 あなたはときにある"grab"オブジェクトを、別の場所にドラッグします。 詳細については、上の私たちのHTMLチュートリアルを参照HTML5のドラッグ&ドロップを

注意:要素がドラッグできるようにするには、グローバルHTML5を使用ドラッグ可能な属性を。

ヒント:リンクや画像は、デフォルトでドラッグ可能であり、必要のないdraggable属性を。

ドラッグ&ドロップ操作の異なる段階で、そこに使用されている多くのイベントがあり、発生する可能性があります。

  • ドラッグ可能ターゲットに発砲イベント (the source element)
    • ondragstart -ユーザーが要素のドラッグを開始したときに発生します
    • ondrag - 要素がドラッグされている場合に発生します
    • ondragend -ユーザーが要素をドラッグし終えたときに発生します

  • ドロップターゲットに発砲イベント:
    • ondragenter -ドラッグされた要素がドロップターゲットに入ったときに発生
    • OnDblClick -ドラッグされた要素がドロップターゲット上にあるときに発生
    • ondragleave -ドラッグされた要素がドロップターゲットから離れたときに発生
    • ondrop -ドラッグされた要素をドロップターゲットにドロップされたときに発生

注意:要素をドラッグしながら、ondragイベントは、すべて350ミリ秒を発射。


ブラウザのサポート

表中の数字は完全にイベントをサポートする最初のブラウザのバージョンを指定します。

イベント
ondrag 4.0 9.0 3.5 6.0 12.0

構文

HTMLには:

JavaScriptで:

JavaScriptでは、使用してaddEventListener()メソッドを:

object .addEventListener("drag", myScript );
»それを自分で試してみてください

注: addEventListener()メソッドは、Internet Explorer 8およびそれ以前のバージョンでサポートされていません。


技術的な詳細

バブル: はい
取消し可能: はい
イベントの種類: DragEventです
サポートされているHTMLタグ: すべてのHTML要素
DOMバージョン: レベル3のイベント

例

その他の例

すべての可能なドラッグアンドドロップイベントのデモンストレーション:

<p draggable="true" id="dragtarget">Drag me!</p>

<div class="droptarget">Drop here!</div>

<script>
/* ----------------- Events fired on the drag target ----------------- */

document.addEventListener("dragstart", function(event) {
    // The dataTransfer.setData() method sets the data type and the value of the dragged data
    event.dataTransfer.setData("Text", event.target.id);

    // Output some text when starting to drag the p element
    document.getElementById("demo").innerHTML = "Started to drag the p element.";

    // Change the opacity of the draggable element
    event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
    event.target.style.opacity = "1";
});


/* ----------------- Events fired on the drop target ----------------- */

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});
</script>
»それを自分で試してみてください

関連ページ

HTMLチュートリアル: HTML5ドラッグ&ドロップ

HTMLリファレンス: HTMLドラッグ可能な属性


イベントオブジェクト参照 イベントオブジェクト