liguofeng29’s blog

個人勉強用ブログだっす。

HTML5の要素と属性 - DND(Drag And Drop) API

HTML5 ┗━HTML5の常用要素と属性

HTML5では要素をドラッグ＆ドロップするAPIを提供する

ドラッグ＆ドロップイベント

  • ondragstart : ドラッグ開始時

    • イベント元 : HTML要素

  • ondrag : ドラッグが継続している間

    • イベント元 : HTML要素

  • ondragend : ドラッグ終了時

    • イベント元 : HTML要素

  • ondragenter : ドラッグ要素がドロップ要素に入った時

    • イベント元 : マウスが通過する要素

  • ondragover : ドラッグ要素がドロップ要素に重なっている間

    • イベント元 : マウスが通過する要素

  • ondragleave : ドラッグ要素がドロップ要素から出た時

    • イベント元 : マウスが通過する要素

  • ondrop : ドロップ時

    • イベント元 : マウスが通過する要素

移動できるDIVサンプル
テスト環境はChrome.

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> Drag And Drop Div </title>
</head>
<body>
<div id="source" style="width:80px;height:80px;
  border:1px solid black;
  background-color: #bbb;"
    draggable="true">移動できるDIV</div>
<script type="text/javascript">
   var source = document.getElementById("source");
   source.ondragstart = function(evt)
   {
       // データを持つ
       evt.dataTransfer.setData("text/plain" , "www.google.co.jp");
   }
   document.ondragover = function(evt)
   {
       // デフォルト操作取り消し
       return false;
   }
   document.ondrop = function(evt)
   {
       source.style.position = "absolute";
       source.style.left = evt.pageX + "px";
       source.style.top = evt.pageY + "px";
       // デフォルト操作取り消し
       return false;
   }
</script>
</body>
</html>

f:id:liguofeng29:20160117225500g:plain