drag拖拽程式碼例項

admin發表於2017-04-16

分享一段程式碼例項，它利用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>

相關文章