在html中,事件的处理都是在js中完成的,html,js和css是密不可分的。下面就是在js中处理拖拽事件的例子。
拖拽事件分两大块,一块是对拖拽的目标上的处理(即拖动目标);一块是对拖拽到的目标上的处理(即释放目标)。
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
实现代码如下:box1和lists可以相互拖拽
Title#box1{width: 200px;height: 250px;border:2px solid red;}
#lists{ width:200px; height:250px; list-style: none;padding: 0;margin: 10px 0px; border:2px solid blue;}
li{width: 150px;height: 30px; margin: 5px 0; padding:0;background: #ccc; line-height:30px;text-align: center ;}
window.οnlοad=function () {
var box1=document.getElementById("box1");
var lists=document.getElementById("lists");
var lis=document.getElementsByTagName("li");
for(var i=0;i
lis[i].draggable=true;
lis[i].flag=false;
//1、拖拽开始
lis[i].οndragstart=function () {
this.flag=true;
}
//2、拖拽移动
two.οndrag=function () {
}
//3、拖拽结束
lis[i].οndragend=function () {
this.flag=false;
}
}
//投放区事件
//1、进入投放区
box1.οndragenter=function (e) {
e.preventDefault();
}
//2、在投放区内移动
box1.οndragοver=function (e) {
e.preventDefault();
}
//3、离开投放区
box1.οndragleave=function (e) {
e.preventDefault();
}
//4、完成投放 此时可以在投放区内做处理
box1.οndrοp=function (e) {
e.preventDefault();
for(var i=0;i
if(lis[i].flag){
box1.appendChild(lis[i]);
}
}
}
lists.οndragenter=function (e) {
e.preventDefault();
}
lists.οndragοver=function (e) {
e.preventDefault();
}
lists.οndragleave=function (e) {
e.preventDefault();
}
lists.οndrοp=function (e) {
e.preventDefault();
for(var i=0;i
if(lis[i].flag){
lists.appendChild(lis[i]);
}
}
}
}
数据1数据2数据3数据4数据5数据6其中:getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
e.preventDefault();是阻止系统默认的拖拽事件。
appendChild()是添加控件到指定控件中。e.preventDefault();
以上就是html drag拖拽事件的所有内容了,希望给大家带来帮助。
相关推荐: