HTML5 元素拖動 - 實現元素左右拖動，或更改自身排序

時間 2019-12-14

標籤 html5 html 元素拖動實現左右更改自身排序欄目 HTML5 简体版

原文原文鏈接

一、拖放（Drag 和 drop）是 HTML5 標準的組成部分。javascript

拖放是一種常見的特性，即抓取對象之後拖到另外一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放。html

瀏覽器支持：Internet Explorer 九、Firefox、Opera 十二、Chrome 以及 Safari 5 支持拖放（注：在 Safari 5.1.2 中不支持拖放。）。java

二、相關屬性及方法 瀏覽器

設置元素爲可拖放，把 draggable 屬性設置爲 true app

 <labeldraggable="true"">index1</label>

設置元素被拖動時觸發的事件 ondragstartpost

<label draggable="true" ondragstart="drag(event)">...</label>

放到何處 - ondragover ，以div 爲例：this

<div id="right" ondragover="dragover(event)">...</div>

進行放置 - ondrop，以div 爲例：spa

<div id="right" ondragover="dragover(event)" ondrop="drop(event)">...</div>

三、實現一個簡單的 從左向右 或 從右向左 拖動元素，且能夠移動元素以前的排列位置。 3d

效果圖：code

圖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 複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML5 元素拖動 - 實現元素左右拖動， 或更改自身排序

代碼解釋：

HTML5 元素拖動 - 實現元素左右拖動，或更改自身排序