最近瀏覽了張鑫旭大神的基於HTML5 drag/drop模塊拖動插入排序刪除完整實例,感覺受益匪淺。於是將最做的demo記錄下來。
首先瀏覽一下事件,這些事件比較好記,只要記住用在誰的身上就好了,無非是被推拽的元素和目標元素。
被拖拽元素上觸發的事件:
1.ondragstart - 用戶開始拖動元素時觸發
2.ondrag - 元素正在拖動時觸發
3.ondragend - 用戶完成元素拖動后觸發
目標元素上觸發的事件:
1.ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
2.ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
3.ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
4.ondrop - 在一個拖動過程中,釋放鼠標鍵時觸發此事件
另外需要的知識點就是event對象中的preventDefault()。引用張大神的原話:在ondragover
中一定要執行preventDefault()
,否則ondrop
事件不會被觸發。另外,如果是從其他應用軟件或是文件中拖東西進來,尤其是圖片的時候,默認的動作是顯示這個圖片或是相關信息,並不是真的執行drop
。此時需要用用document
的ondragover
事件把它直接干掉。
於是乎我照樣子做了個小demo,很好理解。代碼如下:
html:
<div class="left" id = 'trash'>垃圾箱</div> <div class="right"> <ul> <li draggable = 'true'>1</li> <li draggable = 'true'>2</li> <li draggable = 'true'>3</li> <li draggable = 'true'>4</li> </ul> </div>
css:
.left{ width: 100px; height: 400px; float: left; margin-left: 20px; margin-top: 20px; background: #ccc; font-size: 100px; color: #fff; } .right{ width: 200px; height: 400px; float: left; background: #fff; margin-top: 20px; cursor: move; } ul{ margin:0; padding:0; } ul>li{ height:80px; margin-bottom: 20px; text-align: center; list-style-type: none; background: #f90; line-height: 80px; }
js
var arr_li = document.getElementsByTagName('li'); var trash = document.getElementById('trash'); var index = null; for(var i = 0; i < arr_li.length; i++){ this.ondragstart = function(event){ event.dataTransfer.getData('text',event.target.innerHTML); trash.style.color = 'red'; trash.innerHTML = '刪除'; index = event.target; this.style.cursor = 'move'; } this.ondragend = function(event){ trash.style.color = '#fff'; trash.innerHTML = '垃圾箱'; } } trash.ondragover = function(event){ event.preventDefault(); } trash.ondragenter = function(event){ this.style.color = 'blue'; } trash.ondragleave = function(event){ this.style.color = 'red'; } trash.ondrop = function(event){ event.preventDefault(); this.style.color = "#fff"; this.innerHTML = '垃圾箱'; index.parentNode.removeChild(index); }
簡單的效果圖如下: