HTML5實現頁面元素拖放

時間 2019-11-11

標籤 html5 html 實現頁面元素拖放欄目 HTML5 简体版

原文原文鏈接

　　最先在網頁中引入JavaScript拖放功能的是IE4，當時網頁只有兩種對象能夠拖放：圖像的文本。在HTML5中提供了拖拽的API，使得任意元素均可以實現拖放，當咱們在網頁上拖放某個元素的時候將會依次觸發如下事件：javascript

一、ondragstart--開始拖動元素時觸發html

二、ondrag--按住左鍵，拖動元素時觸發java

三、ondragend--釋放左鍵，結束拖動時觸發web

　　當釋放某個元素時將會依次觸發如下時間：瀏覽器

一、ondragenter--拖動元素開始進入容器時觸發app

二、ondragover--拖動元素進入容器，拖動時觸發url

三、ondragleave--拖動元素離開容器時觸發spa

四、ondrop--釋放拖動元素時觸發，優先ondragend觸發rest

PS:在默認狀況下，一個元素是不能放置到另外一個元素裏的，若是要實現拖放的功能，則須要在ondragover事件中須要加上event.preventDefault()阻止默認行爲，不然ondrop就不會執行了code

dataTransfer對象

　　在實現拖放效果的時候而且要發生數據的變化，在IE5中引入了dataTransfer對象，它是事件對象的一個屬性，用於拖動元素向容器傳遞字符串格式數據，使用這個對象的屬性和方法能夠用來完善拖放功能。

　　dataTransfer對象有兩個主要方法：getData()和setData()。getData()用於獲取setData()保存的值。setData()方法的第一個參數也是getData()方法惟一的一個參數，爲字符串類型，表示保存的數據類型，在IE中指定義了'text'或者'URL'兩種有效類型，而在HTML5中是容許指定各類MIME類型，這兩種類型會被映射爲'text/plain'和'text/uri-list'，用法以下：

//設置和接收字符串
    event.dataTransfer.setData('text/plain','some text');
    var text = event.dataTransfer.getData('text/plain');
    
    //設置和接收URL
    event.dataTransfer.setData('text/uri-list','http://www.cnblogs.com/weapon-x/');
    var url= event.dataTransfer.getData('text/uri-list');

　　　實際上，dataTransfer對象能夠爲每種MIME類型保存一個值，就是說能夠同時在對象上保存一段文本和一段URL，保存在對象中的數據只能在drop時間處理程序中去讀取了。

　　利用dataTransfer對象不光可以傳輸數據，還能經過它來肯定被拖動元素以及做爲放置的目標的元素能接受什麼操做，須要訪問:dropEffect和effectAllowed這兩個屬性，具體能夠查一下API哈。

　　好了，有了以上的知識前提下，我寫了一個簡單的demo，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .interest-box{
            width: 300px;
            height: 100px;
            border:1px solid #eee;
            list-style: none;
        }
        .interest-box li{
            width: 50px;
            line-height: 30px;
            border-radius: 5px;
            border:1px solid #1d7db1;
            text-align: center;
            float:left;
            margin-right: 10px;
            cursor: pointer;
            -webkit-user-select: none;
        }
        #trash{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<p>選擇本身的興趣愛好</p>
<ul class="interest-box">
    <li class="interest" draggable="true">音樂</li>
    <li class="interest" draggable="true">運動</li>
    <li class="interest" draggable="true">電影</li>
    <li class="interest" draggable="true">code</li>
</ul>
<p>個人興趣：</p>
<ul id="my-interest" class="interest-box"></ul>
<p>垃圾桶</p>
<div id="trash"></div>
<script>
    window.onload = function(){
        var $li = document.getElementsByTagName('li'),
                $mi = document.getElementById('my-interest'),
                $trash = document.getElementById('trash');
        for(var i= 0,length = $li.length;i<length;i++){
            //爲每一個li添加ondragstart事件
            $li[i].ondragstart = function(e) {
                //存儲innerHTML
                e.dataTransfer.setData('text/plain','<li>'+ e.target.innerHTML);
            }
        }
        $mi.ondragover = function(e){
            //阻止默認行爲
            e.preventDefault();
        }
        $mi.ondrop = function(e){
            //獲取數據
            var html = e.dataTransfer.getData('text/plain');
            if(html.indexOf('<li>')==0){
                var _li = document.createElement('li');     //建立新元素
                _li.id = (new Date()).getTime();            //生成惟一ID
                _li.draggable = true;
                _li.innerHTML = html.substring(4);          //字符串截取
                $mi.appendChild(_li);
                //添加ondragstart
                _li.ondragstart = function(e){
                    e.dataTransfer.setData('text/plain','<id>'+_li.id);
                }
            }
        }
        $trash.ondragover = function(e){
            //阻止默認行爲
            e.preventDefault();
        }
        $trash.ondrop = function(e){
            var _id = e.dataTransfer.getData('text/plain');
            if(_id.indexOf('<id>')==0){
                var target = document.getElementById(_id.substring(4));
                $mi.removeChild(target);        //刪除節點
            }
        }
    }
</script>
</body>
</html>

　截圖以下：