【实例】html5拖拽函数实例说明

效果：通过拖拽，把粉红色的div拖拽到灰色的div里面。

到如图效果：

Html：

<div id="two" draggable="true">请拖拽我</div>

js：

window.onload=function(){

var one = document.getElementById("one");

var two = document.getElementById("two");

//拖拽事件

two.ondragstart=function(e){ //当元素拖拽开始触发
e.dataTransfer.setData("参数名","参数值"); //传递参数

//one.innerHTML = "开始...";

}

two.ondrag=function(){ //在元素拖拽过程中触发,在拖拽过程中会一直触发

//one.innerHTML += "移动...";

}

two.ondragend=function(){ //元素拖拽结束时触发

//one.innerHTML += "拖拽完成...";

}

//投放区事件

one.ondragenter=function(e){ //当拖拽对象进入投放区时触发

//one.innerHTML += "开始进入投放区...";

e.preventDefault();

}

one.ondragover=function(e){ //拖拽对象在投放区内移动时触发

//one.innerHTML += "在投放区内移动...";

e.preventDefault();

}

one.ondragleave=function(e){ //拖拽对象没有投放到投放区，离开投放区的时候触发

//one.innerHTML += "离开投放区...";

e.preventDefault();

}

one.ondrop=function(e){ //拖拽对象投放在投放区时触发

e.preventDefault();
alert(e.dataTransfer.getData("参数名")) ; //获取参数

one.appendChild(two);

}

}

实例下载：点此下载