HTML5の要素と属性 - DataTransfer

DND(Drag And Drop)を行う際のデータ運びに使うのはDataTransferオブジェクトである。

DataTransferの属性とメソッド

dataTransfer.dropEffect : DND可能な操作
- 属性値は、none, copy, link, move
dataTransfer.effectAllowed
- 属性値は、none, copy, copyLink, copyMove, link, linkMove, move, all, unintialized
dataTransfer.items : DataTransferItemsオブジェクトを返す
dataTransfer.setDragImage(element, x, y) : 移動中カスタムい目ーjい設定
dataTransfer.addElement(element) :　カスタムイメージ追加
dataTransfer.types : DOMStringListオブジェクトを返す
dataTransfer.getData(format)
dataTransfer.setData(format, data)
dataTransfer.clearData([format])

DataTransferサンプル

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> DataTransfer </title>
   <style type="text/css">
        div>div{
            display: inline-block;
            padding: 10px;
            background-color: #aaa;
            margin: 3px;
        }
    </style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>好きな項目をお気に入りへ移動</h2>
<div draggable="true" ondragstart="dsHandler(event);">google</div>
<div draggable="true" ondragstart="dsHandler(event);">yahoo</div>
<div draggable="true" ondragstart="dsHandler(event);">MS</div>
<div draggable="true" ondragstart="dsHandler(event);">apple</div>
</div>
<div id="dest"
    style="width:400px;height:260px; 
  border:1px solid black;float:left;">
    <h2 ondragleave="return false;">お気に入り</h2>
</div>
<img id="gb" draggable="false" src="garbagebin.png"
    alt="ゴミ箱" style="float:left;"/>
<script type="text/javascript">
   var dest = document.getElementById("dest");
   // ドラッグ開始イベント
   var dsHandler = function(evt)
   {
       // innerHTMLを運ぶ
       evt.dataTransfer.setData("text/plain"
           , "<item>" + evt.target.innerHTML);
   }
   dest.ondrop = function(evt)
   {
       var text = evt.dataTransfer.getData("text/plain");
       // <item>開始するデータなら
       if (text.indexOf("<item>") == 0)
       {
           // DIV要素生成
           var newEle = document.createElement("div");
           // ID生成
           newEle.id = new Date().getUTCMilliseconds();
           // 運ばれたデータ
           newEle.innerHTML = text.substring(6);
           // ドラッグ可能
           newEle.draggable="true";
           // ドラッグ開始イベント
           newEle.ondragstart = function(evt)
           {
               // <remove>データを運ぶ
               evt.dataTransfer.setData("text/plain"
                   , "<remove>" + newEle.id);
           }
           dest.appendChild(newEle);
       }

   }
   // ゴミ箱
   document.getElementById("gb").ondrop = function(evt)
   {
       var id = evt.dataTransfer.getData("text/plain");
       // <remove>開始するデータなら
       if (id.indexOf("<remove>") == 0)
       {
           // 要素取得
           var target = document.getElementById(id.substring(8));
           // 要素削除
           dest.removeChild(target);
       }
   }
   document.ondragover = function(evt)
   {
       // デフォルト操作取り消し
       return false;
   }
   document.ondrop = function(evt)
   {
       // デフォルト操作取り消し
       return false;
   }
</script>
</body>
</html>

f:id:liguofeng29:20160117232058g:plain

liguofeng29’s blog

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

HTML5の要素と属性 - DataTransfer