在HTML5之前,网页中实现拖拽功能要借助到js中的(onmousedown + onmousemove),现在HTML5内部就支持了拖拽功能,结合js能够极大方便我们实现拖拽功能,但是此功能仅能支持偶先的几款浏览器。
创建拖拽对象
需要给要拖拽的对象设置draggable属性,它有3个值,true:元素可以拖拽,false:元素不可以拖拽,auto:浏览器自己判断元素是否可以被拖拽。
处理拖拽事件
当我们,拖拽对象的时候会触发拖拽事件
A,dragstart:当元素拖拽开始触发
B,drag:在元素拖拽过程中触发
C,dragend:在元素拖拽结束时触发
创建投放区
当把拖拽对象进入投放区的时候回触发相关的事件
A,dragenter : 当拖拽对象进入投放区时触发
B,dragover : 拖拽对象在投放区内移动时触发;
C,dragleave : 拖拽对象没有投放到投放区,离开投放区的时候触发
D,drop : 拖拽对象投放到投放区是触发
使用dataTransfer传递数据
当我们需要拖拽对象向投放区传递数据的时候,用到dataTransfer有下面的属性和方法
1,type : 返回数据的格式
2,getData : 返回指定格式的数据
3,setData : 设置指定格式的数据
4,clearData : 移除指定格式的数据
5,files : 返回已经投放的文件的信息数组
注意: dragenter,dragover可能会受到默认事件的影响,用e.preventDefault()来阻止事件默认事件
<!DOCTYPE html>
<html>
<head>
<title> 拖拽 </title>
</head>
<style>
#one{
width: 200px;height: 200px;border: 1px solid red;
}
#two{
width: 100px;height: 100px;border: 1px solid blue;
}
</style>
<script>
window.onload = function(){
// 获取one,two两个元素
var one = document.getElementById("one");
var two = document.getElementById("two");
// two开始拖拽
two.ondragstart = function(e){
e.dataTransfer.setData("Text","hello"); <span style="color:#3366FF;">//设置指定格式的数据</span>
one.innerHTML += "Andy";
}
// two 拖拽过程中
two.ondrag = function (){
one.innerHTML += "KK-";
}
// two 拖拽结束
two.ondragend = function () {
one.innerHTML += "success";
}
// 进入拖拽区域
one.ondragenter = function (e){
one.innerHTML += "OK";
e.preventDefault();
}
// 在托在区移动
one.ondragover = function (e){
e.preventDefault();
}
// 离开拖拽区
one.ondragleave = function (e){
e.preventDefault();
}
// 拖拽对象投放到拖拽区
one.ondrop = function (e) {
e.preventDefault();
alert(e.dataTransfer.getData("Text")); <span style="color:#3366FF;">// 返回指定格式的数据</span>
one.appendChild(two);
}
}
</script>
<body>
<div id = "one"></div>
<div id = "two" draggable = true></div>
</body>
</html>
上面是一个简单的demo
为了便于大家的进一步的理解
在附上一个简单的例子,勿喷哈
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>drag</head>
<style>
#box{
width:200px;height:200px;border:1px solid red;
}
#con{
width:200px;height:200px;border:1px solid blue;list-style:none;padding:0;margin:0;
}
li{
width:150px;height:30px;margin:5px 0;background:#ccc;line-height:30px;text-align:center;
list-style:none;
}
</style>
<script>
window.onload=function () {
var box=document.getElementById("box");
var con=document.getElementById("con");
var lis=document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].draggable=true;
lis[i].flag=false;
lis[i].ondragstart=function () {
// 开始拖拽的时候,给每一行设置一个标记
this.flag=true;
}
lis[i].ondragend=function () {
// 结束拖拽的时候,标记的值取反
this.flag=false;
}
}
box.ondragenter=function (e) {
e.preventDefault();
}
box.ondragover=function (e) {
e.preventDefault();
}
box.ondragleave=function (e) {
e.preventDefault();
}
box.ondrop=function (e) {
for (var i=0; i<lis.length; i++) {
if(lis[i].flag){
box.appendChild(lis[i]);
}
}
e.preventDefault();
}
con.ondragenter=function (e) {
e.preventDefault();
}
con.ondragover=function (e) {
e.preventDefault();
}
con.ondragleave=function (e) {
e.preventDefault();
}
con.ondrop=function (e) {
for (var i=0; i<lis.length; i++) {
// 遍历,如果标记的值为真,则进行添加
if(lis[i].flag){
con.appendChild(lis[i]);
}
}
e.preventDefault();
}
}
</script>
</head>
<body>
<div id="box">
</div>
<ul id="con">
<li>one</li>
<li>two</li>
<li>thress</li>
<li>four</li>
</ul>
</body>
</html>
效果图如下
拖拽之后
共同学习,一起进步!