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

最新推荐文章于 2024-06-13 15:49:37 发布

lucky芬

最新推荐文章于 2024-06-13 15:49:37 发布

阅读量4.1k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

1、拖放(Drag 和 drop)是 HTML5 标准的组成部分。

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

　　浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放(注：在 Safari 5.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 里进行绑定

 
<!--左边元素框-->
 
<div id="left">
 
    <label class="move" draggable="true" id="index1">index1</label>
 
    <label class="move" draggable="true" id="index2">index2</label>
 
    <label class="move" draggable="true" id="index3">index3</label>
 
    <label class="move" draggable="true" id="index4">index4</label>
 
    <label class="move" draggable="true" id="index5">index5</label>
 
    <label class="move" draggable="true" id="index6">index6</label>
 
    <label class="move" draggable="true" id="index7">index7</label>
 
</div>
 
<!--右边元素框-->
 
<div id="right">
 
</div>

　　javascript:

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

 
var len = document.getElementsByClassName('move').length;
 
for (var i = 0; i < len; i++) {
 
    document.getElementsByClassName('move').item(i).ondragstart = function (ev) {
 
        //dataTransfer.setData() 方法设置被拖数据的数据类型和值
 
        ev.dataTransfer.setData("Text", ev.target.id);
 
    };
 
}

　　设置左边-〉右边拖动

 
document.getElementById('right').ondragover = function (ev) {
 
        //只接受从左边拖动到右边的元素，不接受自己元素框中元素拖动
 
        if (ev.target.id == 'right') {
 
            ev.preventDefault(); //阻止向上冒泡
 
        }
 
    }
 
 
 
    document.getElementById('right').ondrop = function (ev) {
 
        ev.preventDefault();
 
        var id = ev.dataTransfer.getData('Text');
 
        if (document.getElementById(id).parentElement.id == 'left') {
 
            ev.target.appendChild(document.getElementById(id));
 
        }
 
    }

　　设置右边-〉左边拖动

 
document.getElementById('left').ondragover = function (ev) {
 
        //只接受从右边拖动到左边的元素，不接受自己元素框中元素拖动
 
        if (ev.target.id == 'left') {
 
            ev.preventDefault(); //阻止向上冒泡
 
        }
 
    }
 
    document.getElementById('left').ondrop = function (ev) {
 
        ev.preventDefault();
 
        var id = ev.dataTransfer.getData('Text');
 
        if (document.getElementById(id).parentElement.id == 'right') {
 
            ev.target.appendChild(document.getElementById(id));
 
        }
 
    }

　　代码解释：

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

　　源代码：

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

原文链接：http://www.cnblogs.com/bean-sprout/p/5892727.html?utm_source=tuicool&utm_medium=referral

lucky芬

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5 元素拖动 - 实现元素左右拖动

1、拖放(Drag 和 drop)是 HTML5 标准的组成部分。　　拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。　　浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放(注：在 Safari 5.1.2 中不支持拖放)。
复制链接

扫一扫