html drag 例子,html drag拖拽事件

在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拖拽事件的所有内容了，希望给大家带来帮助。

相关推荐：