From 82fe8571e576cf2fde2c0ffaa88f10a50d53089e Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Sat, 29 Apr 2017 11:42:10 +0800
Subject: [PATCH] update drag-demo
---
drag-demo/index.html | 20 +++++++++++++++++---
drag-demo/index.js | 5 +++++
2 files changed, 22 insertions(+), 3 deletions(-)
diff --git a/drag-demo/index.html b/drag-demo/index.html
index bdff75c..ed0bbe8 100644
--- a/drag-demo/index.html
+++ b/drag-demo/index.html
@@ -10,9 +10,14 @@
margin: 0;
padding: 0;
}
- .main{
+ html,body{
+ height: 100%;
+ }
+ #app{
+ position: relative;
width: 100%;
- max-width: 1150px;
+ height: 100%;
+ max-width: 980px;
margin: auto;
}
.list{
@@ -20,6 +25,15 @@
height: 20px;
border-bottom: 1px solid #ddd;
}
+ #recycle{
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 70px;
+ line-height: 70px;
+ text-align: center;
+ background: #ddd;
+ }
@@ -33,7 +47,7 @@
这里是列表6的标题
这里是列表7的标题
-
+ 回收站
diff --git a/drag-demo/index.js b/drag-demo/index.js
index 930c3a0..0b0b22c 100644
--- a/drag-demo/index.js
+++ b/drag-demo/index.js
@@ -1,5 +1,6 @@
var iosDragDropShim = { enableEnterLeave: true } // 兼容移动端
var source = document.querySelectorAll('.list'),
+ recycle = document.getElementById('recycle'),
dragElement = null, // 用于存放拖动元素
lock = true; // 最后元素拖放拖放时会进入enter和leave的循环，用来锁住
@@ -33,5 +34,9 @@ for(var i = 0; i < source.length; i++){
}, false)
};
+recycle.addEventListener('drop', function(ev){ // 拖进回收站则删除该元素
+ dragElement.parentNode.removeChild(dragElement);
+}, false)
+
document.ondragover = function(e){e.preventDefault();} // 必须设置dragover阻止默认事件
document.ondrop = function(e){e.preventDefault();}
\ No newline at end of file