drag拖拽代码实例

快乐打工仔发布于 2年前分类：实例代码

分享一段代码实例，它利用HTML5实现了拖拽效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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.pipipi.net" target="_blank">www.pipipi.net</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>

drag拖拽代码实例，这样的场景在实际项目中还是用的比较多的，关于drag拖拽代码实例就介绍到这了。

drag拖拽代码实例属于前端实例代码，有关更多实例代码大家可以查看。

我来回复

暂无回复内容