drag拖拽程式碼例項
分享一段程式碼例項,它利用HTML5實現了拖拽效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { padding: 0; margin: 0; } ul { list-style: none; } .delete-box { float: left; padding: 1.6em 1em; font-size: 32px; color: #333; background-color: #EEE; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; -o-transition: background-color .4s linear; transition: background-color .4s linear; } .delete-box.active { color: #FFF; background-color: #6CC383; } .list { float: left; width: 400px; margin: 10px; } .list li { padding: .4em .8em; margin-bottom: 10px; font-size: 16px; color: #333; background: #F5F5F5; border: 1px dashed #CCC; } .list li:hover { background-color: #EEE; } /* 元素漸顯 */ .list + .list li { -webkit-animation: fadeIn .4s both; -moz-animation: fadeIn .4s both; animation: fadeIn .4s both; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body> <div id="box" dropgable="true" class="delete-box">拷<br>貝<br>箱</div> <ul id="list" class="list"> <li draggable="true">本站的url地址是<a href="http://www.softwhy.com" target="_blank">www.softwhy.com</a></li> <li draggable="true">只有努力奮鬥才會有美好的未來</li> <li draggable="true">本站專注於前端知識分享</li> <li draggable="true">只有當前時間才是真實的,下一秒都是虛幻/li> <li draggable="true">本站位於青島市南區</li> </ul> <ul id="grag-list" class="list"></ul> <script> (function(doc) { 'use strict'; var list = doc.getElementById("list").children, box = doc.getElementById("box"); Array.prototype.slice.call(list).forEach(function(li) { // 拖拽開始 li.addEventListener("dragstart", function(e) { // 設定拖拽資料 e.dataTransfer.setData("text/html", this.innerHTML.replace(/\s+draggable=['"]true["']/, "")); }); // 拖拽結束 li.addEventListener("dragend", function(e) { // 設定拖拽資料 box.classList.remove("active"); }); }); // 拖拽元素進入目標元素 box.addEventListener("dragenter", function() { this.classList.add("active"); }); // 拖拽元素在目標元素移動 // 如果設定e.preventDefault(); 則無法觸發ondrop事件 box.addEventListener("dragover", function(e) { e.preventDefault(); }); // 拖拽元素離開目標元素區域 box.addEventListener("dragleave", function(e) { box.classList.remove("active"); }); // 拖拽元素在目標上釋放 box.addEventListener("drop", function(e) { var li = doc.createElement("li"); li.innerHTML = e.dataTransfer.getData("text/html"); doc.getElementById("grag-list").appendChild(li); }); })(document); </script> </body> </html>
相關文章
- HTML5 拖拽程式碼例項HTML
- drag &drop 拖拽事件事件
- drag & drop 拖拽事件事件
- Drag & Drop 拖拽詳解
- Draggable 拖拽例項
- HTML5 Drag和Drop 拖拽HTML
- HTML5 drag & drop 拖拽與拖放HTML
- html-拖拽釋放(Drag and drop) APIHTMLAPI
- Canvas drag 實現拖拽拼圖小遊戲Canvas遊戲
- HTML5原生拖拽/拖放 Drag & Drop 詳解HTML
- jQuery is() 程式碼例項jQuery
- vue-drag-resize 全解,vue拖拽縮放元件Vue元件
- jQuery選項卡例項程式碼jQuery
- dom操作程式碼例項
- javascript的for in例項程式碼JavaScript
- requestAnimationFrame()動畫例項程式碼requestAnimationFrame動畫
- $$和||使用程式碼例項
- js刮刮樂程式碼例項JS
- canvas刮刮樂程式碼例項Canvas
- css梯形程式碼例項CSS
- toJSON()程式碼例項JSON
- [轉]BDB例項程式碼
- IOS程式碼例項區iOS
- js監聽鍵盤事件程式碼例項例項JS事件
- JavaScript in運算子程式碼例項JavaScript
- 設計模式例項程式碼設計模式
- table表格美化程式碼例項
- js使用XMLHttpRequest例項程式碼JSXMLHTTP
- jQuery操作cookie程式碼例項jQueryCookie
- jQuery 動畫效果程式碼例項jQuery動畫
- DeviceMotionEvent程式碼優化例項dev優化
- javascript操作xml程式碼例項JavaScriptXML
- table表格使用程式碼例項
- JavaScript confirm() 程式碼例項JavaScript
- js confirm()程式碼例項JS
- hasOwnProperty()函式程式碼例項函式
- javascript Function()使用程式碼例項JavaScriptFunction
- css切角效果程式碼例項CSS