H5中的拖拽事件


  最近瀏覽了張鑫旭大神基於HTML5 drag/drop模塊拖動插入排序刪除完整實例,感覺受益匪淺。於是將最做的demo記錄下來。

  首先瀏覽一下事件,這些事件比較好記,只要記住用在誰的身上就好了,無非是被推拽的元素和目標元素。

    被拖拽元素上觸發的事件:

  1.ondragstart - 用戶開始拖動元素時觸發

  2.ondrag - 元素正在拖動時觸發

  3.ondragend - 用戶完成元素拖動后觸發

    目標元素上觸發的事件:

  1.ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件

  2.ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件

  3.ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件

  4.ondrop - 在一個拖動過程中,釋放鼠標鍵時觸發此事件

  另外需要的知識點就是event對象中的preventDefault()。引用張大神的原話:在ondragover中一定要執行preventDefault(),否則ondrop事件不會被觸發。另外,如果是從其他應用軟件或是文件中拖東西進來,尤其是圖片的時候,默認的動作是顯示這個圖片或是相關信息,並不是真的執行drop。此時需要用用documentondragover事件把它直接干掉。

  於是乎我照樣子做了個小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);
        }

簡單的效果圖如下:

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM