使用HTML5实现简单的拖放功能:
1.对象元素的draggable属性设置为true(draggable="true")。还需要注意的是a元素和img元素必须指定href;
2.编写拖拽有关的事件处理代码:
事件 | 产生事件的元素 | 描述 |
dragstart | 被拖放的元素 | 开始拖放操作 |
drag | 被拖放的元素 | 拖放过程中 |
dragenter | 拖放过程中鼠标经过的元素 | 被拖放的元素开始进入本元素的范围之内 |
dragover | 拖放过程中鼠标经过的元素 | 被拖放的元素正在本元素范围内移动 |
dragleave | 拖放过程中鼠标经过的元素 | 被拖放的元素离开本元素的范围 |
drop | 拖放的目标元素 | 其他元素被拖放到了本元素中 |
dragend | 拖放的对象元素 | 拖放操作结束 |
3.案例实现代码:
(1)HTML代码段:
<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br />
<img src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/>
(2)CSS代码段:
#tuo{
width: 540px;
height: 320px;
background: #e54d26;
}
#cun{
width: 540px;
height: 320px;
border: 2px solid #d2d2d2;
box-shadow: 1px 4px 8px #646464;
}
img{
width: 500px;
height: 280px;
}
(3)JavaScript代码段:
function allowDrop(ev){
//不执行默认处理(拒绝被拖放)
ev.preventDefault();
};
function drag(ev){
//使用setData(数据类型,携带的数据)
//方法将要拖放的数据存入dataTransfer对象
ev.dataTransfer.setData("Text",ev.target.id);
};
function drop(ev){
//不执行默认处理(拒绝被拖放)
ev.preventDefault();
//使用getData()获取到数据,然后赋值给data
var data = ev.dataTransfer.getData("Text");
//使用appendChild方法把拖动的节点放到元素节点中成为其子节点
ev.target.appendChild(document.getElementById(data));
};
4.实现的效果如下:
(1)未拖放之前:
(2)拖放之后: