HTML5 元素拖动 - 实现元素左右拖动， 或更改自身排序
1、拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放（注：在 Safari 5.1.2 中不支持拖放。）。
2、相关属性及方法
设置元素为可拖放，把 draggable 属性设置为 true
<labeldraggable="true"">index1</label>
设置元素被拖动时触发的事件 ondragstart
<label draggable="true" ondragstart="drag(event)">...</label>
放到何处 - ondragover ，以div 为例：
<div id="right" ondragover="dragover(event)">...</div>
进行放置 - ondrop，以div 为例：
<div id="right" ondragover="dragover(event)" ondrop="drop(event)">...</div>
3、实现一个简单的 从左向右 或 从右向左 拖动元素，且可以移动元素之前的排列位置。
效果图：
图1.初次加载
图2.从左向右拖动元素
图3.打乱右侧元素排序
图4.把右侧元素移向左边
html:
拖动元素的方法，未在元素上进行绑定，均在 js 里进行绑定
1 <h2>拖放（Drag 和 drop）</h2> 2 <!-- 左边元素框 --> 3 <div id="left"> 4 <label draggable="true">index1</label> 5 <label draggable="true">index2</label> 6 <label draggable="true">index3</label> 7 <label draggable="true">index4</label> 8 <label draggable="true">index5</label> 9 <label draggable="true">index6</label> 10 <label draggable="true">index7</label> 11 </div> 12 <!-- 右边元素框 --> 13 <div id="right"></div>
javascript:
动态给 label元素 加上 id属性 及拖动事件
1 var moveItem = document.getElementsByTagName('label');
2
3 for (let i = 0; i < moveItem.length; i++) {
4 //动态设置label元素id
5 moveItem[i].setAttribute('id', 'label' + i);
6 moveItem[i].ondragstart = function (ev) {
7 //dataTransfer.setData() 方法设置被拖数据的数据类型和值
8 ev.dataTransfer.setData("Text", this.id);
9 };
10 }
设置 左边－〉右边 拖动 或 自身元素排序
1 document.getElementById('right').ondragover = function (ev) {
2 ev.preventDefault(); //阻止向上冒泡
3 }
4 document.getElementById('right').ondrop = function (ev) {
5 ev.preventDefault();
6 var id = ev.dataTransfer.getData('Text');
7 var elem = document.getElementById(id); //当前拖动的元素
8 var toElem = ev.toElement.id; //放置位置
9 if (toElem == 'right') {
10 //如果为container,元素放置在末尾
11 this.appendChild(elem);
12 } else {
13 //如果为container里的元素，则插入该元素之前
14 this.insertBefore(elem, document.getElementById(toElem));
15 }
16 }
设置右边－〉左边拖动 或 自身元素排序
1 document.getElementById('left').ondragover = function (ev) {
2 ev.preventDefault(); //阻止向上冒泡
3 }
4 document.getElementById('left').ondrop = function (ev) {
5 ev.preventDefault();
6 var id = ev.dataTransfer.getData('Text');
7 var elem = document.getElementById(id);
8 var toElem = ev.toElement.id;
9 if (toElem == 'left') {
10 //如果为container,元素放置在末尾
11 this.appendChild(elem);
12 } else {
13 //如果为container里的元素，则插入该元素之前
14 this.insertBefore(elem, document.getElementById(toElem));
15 }
16 }
代码解释：
- ondragover 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
完整代码
1 复制代码 2 <!DOCTYPE html> 3 <html> 4 5 <head lang="en"> 6 <meta charset="UTF-8"> 7 <title>拖动</title> 8 <style> 9 h2 { 10 font-size: 20px; 11 color: #0d88c1; 12 } 13 14 div#left, 15 div#right { 16 width: 120px; 17 float: left; 18 margin: 10px 100px 10px 0px; 19 height: 240px; 20 background-color: #dddddd; 21 border: 1px solid #000; 22 overflow-y: auto; 23 } 24 25 div label { 26 font-size: 22px; 27 font-weight: bold; 28 width: 100%; 29 display: inline-block; 30 padding: 4px 0; 31 text-align: center; 32 margin: 0px 0 2px 0; 33 color: #fff; 34 background-color: #0d88c1; 35 } 36 </style> 37 </head> 38 39 <body> 40 <h2>拖放（Drag 和 drop）</h2> 41 <!-- 左边元素框 --> 42 <div id="left"> 43 <label draggable="true">index1</label> 44 <label draggable="true">index2</label> 45 <label draggable="true">index3</label> 46 <label draggable="true">index4</label> 47 <label draggable="true">index5</label> 48 <label draggable="true">index6</label> 49 <label draggable="true">index7</label> 50 </div> 51 <!-- 右边元素框 --> 52 <div id="right"></div> 53 <script> 54 var moveItem = document.getElementsByTagName('label'); 55 56 for (let i = 0; i < moveItem.length; i++) { 57 //动态设置label元素id 58 moveItem[i].setAttribute('id', 'label' + i); 59 moveItem[i].ondragstart = function (ev) { 60 //dataTransfer.setData() 方法设置被拖数据的数据类型和值 61 ev.dataTransfer.setData("Text", this.id); 62 }; 63 } 64 65 //左－〉右 66 document.getElementById('right').ondragover = function (ev) { 67 ev.preventDefault(); //阻止向上冒泡 68 } 69 document.getElementById('right').ondrop = function (ev) { 70 ev.preventDefault(); 71 var id = ev.dataTransfer.getData('Text'); 72 var elem = document.getElementById(id); //当前拖动的元素 73 var toElem = ev.toElement.id; //放置位置 74 if (toElem == 'right') { 75 //如果为container,元素放置在末尾 76 this.appendChild(elem); 77 } else { 78 //如果为container里的元素，则插入该元素之前 79 this.insertBefore(elem, document.getElementById(toElem)); 80 } 81 } 82 83 84 //右－〉左 85 document.getElementById('left').ondragover = function (ev) { 86 ev.preventDefault(); //阻止向上冒泡 87 } 88 document.getElementById('left').ondrop = function (ev) { 89 ev.preventDefault(); 90 var id = ev.dataTransfer.getData('Text'); 91 var elem = document.getElementById(id); 92 var toElem = ev.toElement.id; 93 if (toElem == 'left') { 94 //如果为container,元素放置在末尾 95 this.appendChild(elem); 96 } else { 97 //如果为container里的元素，则插入该元素之前 98 this.insertBefore(elem, document.getElementById(toElem)); 99 } 100 } 101 </script> 102 </body> 103 104 </html> 105 复制代码
