h5物体拖动_H5简单拖放(Drag/Drop)

前  言

---------

拖拽(Drag/Drop)是个非常普遍的功能。在使用电脑的过程中，拖放一个东西是相当常见。很多javascript都类似实现了相关的功能，例如，jQueryUI的draganddrop组件。在HTML5中，拖拽(draganddrop)成为了标准操作，任何元素都可以进行拖放。下面就了解一下简单的H5拖放。

先上代码：

(代码运行时，可以打开控制台)

#div1,#div2{width:600px;height:400px;padding:10px;border:1px solid red;float:left;

}

functionallowDrop(ev){//重写dragover事件的默认行为，将无效放置目标设置为可放置目标

ev.preventDefault();

console.log("正在目标中移动");

}functiondrag(ev){//重写dragover事件的默认行为，将无效放置目标设置为可放置目标

ev.dataTransfer.setData("Text",ev.target.id);//拖放的数据类型和值

console.log("拖动开始了");

}functiondrop(ev){

ev.preventDefault();//保存在dataTransfer对象中的数据只能在drop事件处理程序中读取

//元素拖到放置目标中会触发drop事件。

vardata=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

console.log("拖放成功了");

}functionenter(){

console.log("进入目标区了");

}functionleave(){

console.log("离开目标区了");

}functionend(){

console.log("拖放停止了");

}//function drags(){//console.log("正在拖放移动中");//}

请把图片拖放到矩形中：

div1