HTML5 元素拖动

来源：互联网发布：java 输入数字判断质数编辑：程序博客网时间：2024/06/05 21:37

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 里进行绑定

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元素加上被拖动事件

1var len = document.getElementsByClassName('move').length;
2for (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}

　　设置左边-〉右边拖动

01document.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    }

　　设置右边-〉左边拖动

01document.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() 方法中设置为相同类型的任何数据。

　　源代码：

011<!DOCTYPE html>
02 2 <html>
03 3 <head lang="en">
04 4     <meta charset="UTF-8">
05 5     <title>拖动</title>
06 6     <style>
07 7         #left,#right,#center{
08 8             float:left;
09 9             border:1px solid #ccc;
1010             width:100px;
1111             padding:10px;
1212             text-align: center;
1313             margin-left: 100px;
1414             height:200px;
1515             overflow-y: auto;
1616         }
1717         #left label,#right label{
1818             width:100%;
1919             display: block;
2020             padding:3px;
2121             font-size: 20px;
2222         }
2323
2424     </style>
2525 </head>
2626 <body>
2727 <h2><mark>拖放（Drag 和 drop）</mark></h2>
2828 <!--左边元素框-->
2929 <div id="left">
3030     <label class="move" draggable="true" id="index1">index1</label>
3131     <label class="move" draggable="true" id="index2">index2</label>
3232     <label class="move" draggable="true" id="index3">index3</label>
3333     <label class="move" draggable="true" id="index4">index4</label>
3434     <label class="move" draggable="true" id="index5">index5</label>
3535     <label class="move" draggable="true" id="index6">index6</label>
3636     <label class="move" draggable="true" id="index7">index7</label>
3737 </div>
3838 <!--右边元素框-->
3939 <div id="right">
4040 </div>
4141 <script>
4242     $(document).ready(function () {
4343         var len = document.getElementsByClassName('move').length;
4444         for (var i = 0; i < len; i++) {
4545             document.getElementsByClassName('move').item(i).ondragstart = function (ev) {
4646                 //dataTransfer.setData() 方法设置被拖数据的数据类型和值
4747                 ev.dataTransfer.setData("Text", ev.target.id);
4848             };
4949         }
5050     });
5151
5252     //左－〉右
5353     document.getElementById('right').ondragover = function (ev) {
5454         //只接受从左边拖动到右边的元素，不接受自己元素框中元素拖动
5555         if (ev.target.id == 'right') {
5656             ev.preventDefault(); //阻止向上冒泡
5757         }
5858     }
5959     document.getElementById('right').ondrop = function (ev) {
6060         ev.preventDefault();
6161         var id = ev.dataTransfer.getData('Text');
6262         if (document.getElementById(id).parentElement.id == 'left') {
6363             ev.target.appendChild(document.getElementById(id));
6464         }
6565     }
6666
6767
6868     //右－〉左
6969     document.getElementById('left').ondragover = function (ev) {
7070         //只接受从右边拖动到左边的元素，不接受自己元素框中元素拖动
7171         if (ev.target.id == 'left') {
7272             ev.preventDefault(); //阻止向上冒泡
7373         }
7474     }
7575     document.getElementById('left').ondrop = function (ev) {
7676         ev.preventDefault();
7777         var id = ev.dataTransfer.getData('Text');
7878         if (document.getElementById(id).parentElement.id == 'right') {
7979             ev.target.appendChild(document.getElementById(id));
8080         }
8181     }
8282
8383
8484
8585
8686 </script>
8787 </body>
8888 </html>
89 
90View Code

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

0 0