drag and drop

一.ドラッグされた要素

要素をドラッグ可能にする方法

          ，  "img", "a"   ,          (draggable),HTML5        draggable，  IE9+:

// draggable  3  true, false, inherit


//               
google

  IE8-   mousedown            dragdrop()  (       IE8-)：

// IE8-           
var box = document.getElementById("box");
box.attachEvent("onmousedown", function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    target.dragdrop();
})

2.被拖动元素拖动事件

1. dragstart 按下鼠标准备拖动时触发，可以用于setData()，effectAllowed
2. drag 拖动过程中触发
3. dragend 松开鼠标的一瞬间触发

---

二.可放置元素(droppable)

1.元素拖到可防止区域发生的事件

1. dragenter 进入元素边界时触发 (可设置dropeffect)
2. dragover 在元素内移动时持续促发
3. dragleave (放置不成功时触发)或者 drop (放置成功时触发， 可用于getData())

2.如何使一个元素变为可放置区域

     dragenter,dragover    ，Firefox  drop       ，        ， 3        ：

// div      


var dropTarget = document.getElementById("dropTarget");
dropTarget.addEventListener("dragenter", function(e) {
    e.preventDefault();
}, false);

dropTarget.addEventListener("dragover", function(e) {
    e.preventDefault();
}, false);

dropTarget.addEventListener("drop", function(e) {
    e.preventDefault();
}, false);

---

三.dataTransfer对象

          ，       ，                   。
dataTransfer event     ，  drag-and-drop        

1.主な2つの方法setData()とgetData()

setData(): 
1. @param1      "text"    "url", HTML5  MIME  ，       MIME   
"text/plain" "text/uri-list"
2. @param2      
3.     dragstart         

getData() 
1. @param        "Text"(T        firefox)    "url"
2.     drop        ，                 

eg:
event.dataTransfer.setData("text", "some text");
event.dataTransfer.setData("url", "http://www.google.com");

var url = event.dataTransfer.getData("url") ||  
          event.dataTransfer.getData("text/uri-list");
var text = event.dataTransfer.getData("Text");

2.dropEffectとeffectAllowed

      ，      

1. dropEffect     "dragenter"      ，none, move, copy, link 4   
2. effectAllowed     "dragstart"      ， none, move, copy...    

3.その他の属性

setDragImage(element, x, y) 
               ，3   
     @params1   html  
     @params2 @params3     
        IE,  "dragstart"     

四.具体例

var section = document.getElementById("section"), big = document.getElementById("big"), boxA = document.getElementById("boxA"), boxB = document.getElementById("boxB"); // EventUtil.addHandler(boxA, "mousedown", function(e) { // e = EventUtil.getEvent(e); // var target = EventUtil.getTarget(e); // target.dragDrop(); // }); // dragstart handler function dragStart(event) { event = event || window.event; var target = event.target || event.srcElement; event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("Text", target.getAttribute("id")); event.dataTransfer.setDragImage(target, 100, 100); return true; } function dragEnter(event) { event = EventUtil.getEvent(event); event.preventDefault(); return true; } function dragOver(event) { event = event || window.event; event.preventDefault(); } // drop handler function dragDrop(event) { event = event || window.event; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); event.stopPropagation(); return false; } boxA.addEventListener("dragstart", dragStart, false); boxB.addEventListener("dragstart", dragStart, false); // big big.addEventListener("dragenter", dragEnter, false); big.addEventListener("dragover", dragOver, false); big.addEventListener("drop", dragDrop, false); // section section.addEventListener("dragenter", dragEnter, false); section.addEventListener("dragover", dragOver, false); section.addEventListener("drop", dragDrop, false);
五.小結

主に要素をどのようにドラッグ可能にするかを考慮する

要素を配置可能にする方法

要素は、ドラッグアンドドロップ時にデータ交換

を行う.