update drag-demo

shan187 · Apr 29, 2017 · 82fe857 · 82fe857
1 parent a57a8a9
commit 82fe857
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/drag-demo/index.html b/drag-demo/index.html
@@ -10,16 +10,30 @@
             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{
             padding:10px;
             height: 20px;
             border-bottom: 1px solid #ddd;
         }
+        #recycle{
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 70px;
+            line-height: 70px;
+            text-align: center;
+            background: #ddd;
+        }
     </style>
 </head>
 <body>
@@ -33,7 +47,7 @@
             <div class="list" draggable="true">这里是列表6的标题</div>
             <div class="list" draggable="true">这里是列表7的标题</div>
         </div>
-        <div id="test"></div>
+        <div id="recycle">回收站</div>
     </div>
     <script src="index.js"></script>
     <script src="http://timruffles.github.io/ios-html5-drag-drop-shim/ios-drag-drop.js"></script>

diff --git 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();}