pc端通過拖放實現新增、刪除功能
阿新 • • 發佈：2018-12-17
話不多說上完整程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon bookmark" type="image/x-icon" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>通過拖放實現新增、刪除 </title> <style type="text/css"> .container{ padding: 10px; box-sizing: border-box; } .container .mainclassify { color: #333333; } .container .mainclassify .title{ line-height: 44px; } .container .mainclassify .title span{ color: #CCCCCC; margin-left: 10px; } .container .mainclassify .listgroup-item { background-color: none; border: none; overflow: hidden; } .container .mainclassify .listgroup-item li{ float: left; width: 25%; height: auto; } .container .mainclassify .listgroup-item .item_list{ /*background-color:;*/ width: 90%; height: 70px; margin: 5px auto; padding: 5px; box-sizing: border-box; font-size: 12px; color: #333; border-radius: 5px; background: #fff; } </style> </head> <body> <main class="container"> <div class="mainclassify"> <p class="fz14 title">我的分類</p> <ul class="listgroup-item"> <li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦1</div></li> <li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦2</div></li> <li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦3</div></li> <li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦4</div></li> <li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦5</div></li> <li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦6</div></li> <li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦7</div></li> <li draggable="true" ondragstart="dsHandler(event)"><div class="item_list">推薦8</div></li> </ul> <div style="border: 1px solid;width: 100%;height: 100px;" id="dest"> <p ondragleave="return false">書藏家</p> </div> <img src="../images/garbagebin.png" id="gb" draggable="false"/> </div> </main> <script type="text/javascript"> var dest = document.getElementById("dest"); //拖動的時間監聽 var dsHandler = function(evt){ //將被拖動的元素的innerHTML屬性設定成被拖動的資料 evt.dataTransfer.setData("text/plain","<item>"+evt.target.innerHTML); }; dest.ondrop = function(evt){ evt.preventDefault(); var text = evt.dataTransfer.getData('text/plain'); // 如果該text以<item>開頭 if (text.indexOf("<item>") == 0) { // 建立一個新的div元素 var newEle = document.createElement("div"); // 以當前時間為該元素生成一個唯一的ID newEle.id = new Date().getUTCMilliseconds(); // 該元素內容為“拖”過來的資料 newEle.innerHTML = text.substring(6); // 設定該元素允許拖動 newEle.draggable="true"; // 為該元素的開始拖動事件指定監聽器 newEle.ondragstart = function(evt) { // 將被拖動元素的id屬性值設定成被拖動的資料 evt.dataTransfer.setData("text/plain" , "<remove>" + newEle.id); } dest.appendChild(newEle); } }; // 當把被拖動元素“放”到垃圾桶上時激發該方法。 document.getElementById("gb").ondrop = function(evt) { var id = evt.dataTransfer.getData("text/plain"); // 如果id以<remove>開頭 if (id.indexOf("<remove>") == 0) { // 根據“拖”過來的資料，獲取被拖動的元素 var target = document.getElementById(id.substring(8)); // 刪除被拖動的元素 dest.removeChild(target); } } document.ondragover = function(evt) { // 取消事件的預設行為 return false; } document.ondrop = function(evt) { // 取消事件的預設行為 return false; } </script> </body> </html>
其實，拖放刪除和新增這個功能最關鍵的地方就是“攜帶資料”。正是因為利用了DataTransfer物件來攜帶資料，才可以像剛才那樣新增和刪除。
下面是攜帶資料的基本思路：
“拖”開始的時候（‘拖’通過ondragstart事件監聽器來實現，上面的程式碼有詳細註釋喲），程式把需要攜帶的資料放入DataTransfer物件中。 “放”下元素的時候（通過ondrop事件監聽器來實現），程式從DataTransfer物件中取出資料，並利用該資料進行相應的處理。上邊的程式就為兩種拖放資料分別添加了<item>、<remove>，分別代表需要新增收藏夾的資料和需要刪除的資料。 好啦，以上就是通過拖動元素來新增和刪除的功能實現。由此可見，通過DataTransfer物件，我們可以讓拖放操作實現更豐富的功能。畢竟，DataTransfer物件的屬性和方法那麼多，想怎麼搭配都可以~
好啦，如果大家有什麼疑問，或者發現文章中有什麼錯誤，歡迎大家留言評論呀，我們一起學習咯~