您的位置：首页 > Web前端 > HTML5

HTML5 元素拖动 - 实现元素左右拖动

2017-02-22 13:41 176 查看
1、拖放(Drag和drop)是HTML5标准的组成部分。

　　拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。

　　浏览器支持：InternetExplorer9、Firefox、Opera12、Chrome以及Safari5支持拖放(注：在Safari5.1.2中不支持拖放)。

　　2、相关属性及方法

　　设置元素为可拖放，把draggable属性设置为true

1
<label
class
=
"move"
draggable=
"true"
id=
"index1"
>index1</label>
　　设置元素被拖动时触发的事件ondragstart

1
<label
class
=
"move"
draggable=
"true"
ondragstart=
"drag(event)"
id=
"index1"
>index1</label>
　　放到何处-ondragover，以div为例：

1
<div
id=
"right"
ondragover=
"dragover(event)"
>...</div>
　　进行放置-ondrop，以div为例：

1
<div
id=
"right"
ondragover=
"dragover(event)"
ondrop=
"drop(event)"
>...</div>
　　3、实现一个简单的从左向右拖动元素，从右向左拖动元素，比较简陋。









　　html:

　　拖动元素的方法，未在元素上进行绑定，均在js里进行绑定

01
<!--左边元素框-->
02
<div
id=
"left"
>
03
<label
class
=
"move"
draggable=
"true"
id=
"index1"
>index1</label>
04
<label
class
=
"move"
draggable=
"true"
id=
"index2"
>index2</label>
05
<label
class
=
"move"
draggable=
"true"
id=
"index3"
>index3</label>
06
<label
class
=
"move"
draggable=
"true"
id=
"index4"
>index4</label>
07
<label
class
=
"move"
draggable=
"true"
id=
"index5"
>index5</label>
08
<label
class
=
"move"
draggable=
"true"
id=
"index6"
>index6</label>
09
<label
class
=
"move"
draggable=
"true"
id=
"index7"
>index7</label>
10
</div>
11
<!--右边元素框-->
12
<div
id=
"right"
>
13
</div>
　　javascript:

　　动态给label元素加上被拖动事件

1
var
len
=document.getElementsByClassName(
'move'
).length;
2
for
(
var
i
=0;i<len;i++){
3
document.getElementsByClassName(
'move'
).item(i).ondragstart
=
function
(ev)
{
4
//dataTransfer.setData()
方法设置被拖数据的数据类型和值
5
ev.dataTransfer.setData(
"Text"
,
ev.target.id);
6
};
7
}
　　设置左边-〉右边拖动

01
document.getElementById(
'right'
).ondragover
=
function
(ev)
{
02
//只接受从左边拖动到右边的元素，不接受自己元素框中元素拖动
03
if
(ev.target.id
==
'right'
)
{
04
ev.preventDefault();
//阻止向上冒泡
05
}
06
}
07
08
document.getElementById(
'right'
).ondrop
=
function
(ev)
{
09
ev.preventDefault();
10
var
id
=ev.dataTransfer.getData(
'Text'
);
11
if
(document.getElementById(id).parentElement.id
==
'left'
)
{
12
ev.target.appendChild(document.getElementById(id));
13
}
14
}
　　设置右边-〉左边拖动

01
document.getElementById(
'left'
).ondragover
=
function
(ev)
{
02
//只接受从右边拖动到左边的元素，不接受自己元素框中元素拖动
03
if
(ev.target.id
==
'left'
)
{
04
ev.preventDefault();
//阻止向上冒泡
05
}
06
}
07
document.getElementById(
'left'
).ondrop
=
function
(ev)
{
08
ev.preventDefault();
09
var
id
=ev.dataTransfer.getData(
'Text'
);
10
if
(document.getElementById(id).parentElement.id
==
'right'
)
{
11
ev.target.appendChild(document.getElementById(id));
12
}
13
}
　　代码解释：

　　ondragover默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
　　调用preventDefault()来避免浏览器对数据的默认处理(drop事件的默认行为是以链接形式打开)
　　通过dataTransfer.getData("Text")方法获得被拖的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。

　　源代码：

01
1<!DOCTYPE
html>
02
2
<html>
03
3
<headlang=
"en"
>
04
4
<metacharset=
"UTF-8"
>
05
5
<title>拖动</title>
06
6
<style>
07
7
#left,#right,#center{
08
8
float:left;
09
9
border:1pxsolid#ccc;
10
10
width:100px;
11
11
padding:10px;
12
12
text-align:center;
13
13
margin-left:100px;
14
14
height:200px;
15
15
overflow-y:auto;
16
16
}
17
17
#leftlabel,#rightlabel{
18
18
width:100%;
19
19
display:block;
20
20
padding:3px;
21
21
font-size:20px;
22
22
}
23
23
24
24
</style>
25
25
</head>
26
26
<body>
27
27
<h2><mark>拖放（Drag和drop）</mark></h2>
28
28
<!--左边元素框-->
29
29
<divid=
"left"
>
30
30
<label
class
=
"move"
draggable=
"true"
id=
"index1"
>index1</label>
31
31
<label
class
=
"move"
draggable=
"true"
id=
"index2"
>index2</label>
32
32
<label
class
=
"move"
draggable=
"true"
id=
"index3"
>index3</label>
33
33
<label
class
=
"move"
draggable=
"true"
id=
"index4"
>index4</label>
34
34
<label
class
=
"move"
draggable=
"true"
id=
"index5"
>index5</label>
35
35
<label
class
=
"move"
draggable=
"true"
id=
"index6"
>index6</label>
36
36
<label
class
=
"move"
draggable=
"true"
id=
"index7"
>index7</label>
37
37
</div>
38
38
<!--右边元素框-->
39
39
<divid=
"right"
>
40
40
</div>
41
41
<script>
42
42
$(document).ready(
function
()
{
43
43
var
len
=document.getElementsByClassName(
'move'
).length;
44
44
for
(
var
i
=0;i<len;i++){
45
45
document.getElementsByClassName(
'move'
).item(i).ondragstart
=
function
(ev)
{
46
46
//dataTransfer.setData()
方法设置被拖数据的数据类型和值
47
47
ev.dataTransfer.setData(
"Text"
,
ev.target.id);
48
48
};
49
49
}
50
50
});
51
51
52
52
//左－〉右
53
53
document.getElementById(
'right'
).ondragover
=
function
(ev)
{
54
54
//只接受从左边拖动到右边的元素，不接受自己元素框中元素拖动
55
55
if
(ev.target.id
==
'right'
)
{
56
56
ev.preventDefault();
//阻止向上冒泡
57
57
}
58
58
}
59
59
document.getElementById(
'right'
).ondrop
=
function
(ev)
{
60
60
ev.preventDefault();
61
61
var
id
=ev.dataTransfer.getData(
'Text'
);
62
62
if
(document.getElementById(id).parentElement.id
==
'left'
)
{
63
63
ev.target.appendChild(document.getElementById(id));
64
64
}
65
65
}
66
66
67
67
68
68
//右－〉左
69
69
document.getElementById(
'left'
).ondragover
=
function
(ev)
{
70
70
//只接受从右边拖动到左边的元素，不接受自己元素框中元素拖动
71
71
if
(ev.target.id
==
'left'
)
{
72
72
ev.preventDefault();
//阻止向上冒泡
73
73
}
74
74
}
75
75
document.getElementById(
'left'
).ondrop
=
function
(ev)
{
76
76
ev.preventDefault();
77
77
var
id
=ev.dataTransfer.getData(
'Text'
);
78
78
if
(document.getElementById(id).parentElement.id
==
'right'
)
{
79
79
ev.target.appendChild(document.getElementById(id));
80
80
}
81
81
}
82
82
83
83
84
84
85
85
86
86
</script>
87
87
</body>
88
88
</html>
89
90
View
Code
原文链接：http://www.cnblogs.com/bean-sprout/p/5892727.html?utm_source=tuicool&utm_medium=referral
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航