HTML5 拖放---drag和drop

拖放四步走：
第一步：设置元素可拖放，即把 draggable属性设置为 true：
例：<div id="div" draggable="true"></div>
第二部：拖动什么--ondragstrat和setData()
例：function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
上例中，数据类型是“Text”,值是可拖动的元素的id("div");

拓展：

dataTransfer对象：他提供了对于预定义的剪贴板格式的访问，也就是说，在拖拽过程中，可以通过dataTransfer对象来传输数据，以便在拖拽操作结束的时候对数据进行其他的操作。该对象的属性：dropEflect:设置或返回拖放目标上允许发生的拖放行为。该属性的取值有：“null”,“copy”,“link ”,“move”.

effectAllowed:设置或返回被拖动元素允许发生的拖动行为，取值有："none","copy","copyLink",copyMove","link","linkMove","move","all","uninitialized".

dataTransfer对象有5个方法：

1.setData(format,data):将指定格式的数据赋值给dataTransfer对象，format定义数据类型，data为待赋值的数据。

2.getData（format）:从dataTransfer对象中获取指定格式的数据。

3.clearData（[format]):从dataTransfer对象中删除制定格式的数据，参数可选。

4.addElement(element)：添加自定义图标。

5.setDragImage(element,x,y):element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

第三步：放到何处-ondargover
ondragover事件规定在何处放置被拖动的数据。默认地无法将数据/元素放置到其他元素中。如果要允许放置，必须阻止默认的处理方式。这里通过调用ondragover事件的event.preventDefault()方法：

event.preventDefault();

第四步：进行放置-ondrop
当放置被拖拽数据时会发生drop事件，例：

 function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data);
}

ondrop事件在可拖动的过程中会触发以下事件：
   1.在拖动目标上触发事件（源元素）：
      a.ondragstart：用户开始拖动元素时触发；
      b.ondrag：元素正在拖动时触发；
      c.ondragend:用户完成拖动后触发。
2.释放目标时触发的事件：
     a.ondragenter:当被拖动的对象进入容器范围内时触发；
     b.ondragover:当某被拖动的对象在另一对象容器范围内拖动时触发此事件；
     c.ondragleave:当被拖动的对象离开其容器范围内时触发；
     d.ondrap:在一个拖动过程中，释放鼠标键时触发此事件。

下面是一个用拖拽完成的数独游戏的部分代码：

function allowDrop(ev){
    ev.preventDefault();
}

function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

var del=[];

function start(){
    var aCard=document.querySelectorAll(".card");
    var oBox=document.getElementById("box");
    var oContainer=document.querySelector(".container");
  var aTd=document.getElementsByTagName("td");
  
  var list=[];
    var count=10;
  var cNode=null; 


   for(var i=0;i<aTd.length;i++){   //找出所有空的格子
    if(aTd[i].innerHTML==""){
       list.push(aTd[i]);
    }
  }

    for(var i=0;i<aCard.length;i++){
        var that=null;
        aCard[i].ondragstart=function(){  //开始拖动元素
           drag(event);
           that=this;           
        }

        for(var j=0;j<list.length;j++){
            list[j].ondragover=function(){  //让所有空格子阻止浏览器对数据的默认操作
             allowDrop(event);
            }

           list[j].ondrop=function(){

           cNode=that.cloneNode(true);
           oContainer.appendChild(cNode);

           that.id="card"+count;
            count++;  
           drop(event);
           del.push(cNode);
           dele();
           }
        }
   }
       
}

start();

function dele(){
  var oDelete=document.getElementById("delete");

   for(var t=0;t<del.length;t++){
    del[t].ondragstart=function(){  //开始拖动元素
           drag(event);
    }

    oDelete.ondragover=function(){
        allowDrop(event);
    }
    oDelete.ondrop=function(){
        drop(event);
        this.innerHTML="";
    }
  }
}

function check(){
  var oBtn=document.getElementById("btn");

  oBtn.onclick=function(){
    isWin();
  }
}

完整代码，请参见https://github.com/zhangyudan/a_little_game。

秒客网

HTML5 拖放---drag和drop

相关文章