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

相关文章