html5拖动div,html元素拖动
在HTML5之前，要实现网页元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API。并通过大量JS代码实现；HTML5引入了直接支持拖拽操作的API，大大简化了网页元素拖拽操作的编程难度，而且这些API不仅支持浏览器内部的元素拖拽，还支持浏览器与其他应用之间的数据拖拽。
本文通过一个简单的例子演示了在HTML5中使用拖放API。
场景：
如下图所示，我们要实现：
将照片从左边的“相册”区域拖放到右边的“垃圾桶”区域；拖拽过程中，要及时提醒“温馨提示”板块，目前正在进行拖拽操作；
实现方法：
上面界面的HTML代码比较简单，如下：复制代码如下：
！声明文档类型
超文本标记语言
头
HTML5实现拖放操作/标题
meta charset=utf-8/
风格。唱片
{
边框：3px虚线# ccc
浮动：左；
边距：10px
最小高度：100px
填充：10px
宽度：220px
}
/风格
/头
“身体”
div id=info
H2提示：你可以直接把照片拖进垃圾箱/h2
/div
div id=album class=album
H2专辑/h2
img draggable= true id= img 1 src= img/BG _ 01 . png /
img draggable= true id= img 2 src= img/BG _ 02 . png /
img draggable= true id= img 3 src= img/BG _ 03 . png /
/div
div id=trash class=album
H2斌/h2
/div
br/
/body
/html
注意：如果要拖放，需要给要拖放的元素添加drag= true 属性；
接下来，将以下JS代码添加到onload事件中。评论比较详细，就不单独解释了。复制代码如下：
脚本
函数init(){
var info=document . getelementbyid( info )；
//获取被拖动的元素，这个例子就是相册所在的DIV。
var src=document . getelementbyid( album )；
//开始拖放操作
src.ondragstart=function (e) {
//获取被拖放的照片ID
var dragim GID=e . target . id；
//获取被拖动的元素
var drag img=document . getelementbyid(drag imgid)；
//拖放操作结束。
dragImg.ondragend=function(e){
//恢复提醒信息
Info.innerHTML=h2提示：可以直接把照片拖进垃圾桶/H2 ；
};
e.dataTransfer.setData(text ，dragImgId)；
};
//在拖放过程中
src.ondrag=function(e){
Info.innerHTML=h2 -照片正在被拖动-/H2 ；
}
//获取拖放的目标元素
var target=document . getelementbyid( trash )；
//关闭默认处理；
target . ondragenter=function(e){
e . prevent default()；
}
target.ondragover=function(e){
e . prevent default()；
}
//将某些东西拖放到目标元素
target.ondrop=function (e) {
var dragged id=e . data transfer . get data( text )；
//获取相册中的DOM对象
var old elem=document . getelementbyid(dragged id)；
//从相册DIV中删除该照片的节点
olde lem . parent node . remove child(olde lem)；
//将拖动的照片DOM节点添加到垃圾桶DIV中；
target . appendchild(old elem)；
Info.innerHTML=h2提示：可以直接把照片拖进垃圾桶/H2 ；
e . prevent default()；
}
}
/script实现效果：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。