标签：
拖放四步走：
第一步：设置元素可拖放，即把 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。
标签：
原文地址：http://www.cnblogs.com/dan-dan/p/4657407.html
