html5拖拽

zxc123e發表於2015-12-12
HTML

一. 頁面內元素拖放

屬性draggable，設定為true，元素可以拖放。

拖放事件

拖拽元素事件：事件物件為被拖拽元素

  • dragstart，拖拽前觸發
  • drag，拖拽前到拖拽結束之間連續觸發
  • dragend，拖拽結束觸發

目標元素事件：事件物件為目標元素
- dragenter，進入目標元觸發
- dragover，進入目標到離開目標之間連續觸發
- dragleave，離開目標元素觸發
- drop，在目標元素上釋放滑鼠觸發
火狐下必須設定dataTransfer物件的setData方法才可以拖拽除圖片外的其他標籤

dataTransfer物件

setData()：設定資料key和value（必須是字串）
getData()：獲取資料，根據key值，獲取對應的value
effectAllowed：設定游標樣式（none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized）
setDragImage：三個引數：指定的元素，座標X，座標Y

<style>
 #ul1 {list-style:none;}
 #ul1 li {width:100px; height:20px;background:gray; display:block; margin:10px;}
 #div1 {width:100px;height:100px; background:pink;margin:100px auto;}
 </style>
 <body>

 <ul id ="ul1">
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
 </ul>
 <div id = "div1">
 </div>
 <script>
    var oUl = document.getElementById("ul1");
    var oli = document.getElementsByTagName("li");
    var oDiv = document.getElementById("div1");
    for(var i = 0; i < oli.length; i++)
    {
        oli[i].index = i;
        oli[i].ondragstart = function(ev)
        {
            var ev = ev || window.event;
            this.style.background = "blue";

            for(var i = 0; i < oli.length; i++)
            {
                oli[i].index = i;
            }
            console.log(this.index);
            ev.dataTransfer.setData("index", this.index);

        }
        var num = 0;
        oli[i].ondrag = function() //在開始和結束之間一直執行
        {
            document.title = num++;
        }
        oli[i].ondragend = function()
        {
            this.style.background = "gray";
        }
    }
    oDiv.ondragenter = function()
    {
        this.style.background = "red";
    }
    oDiv.ondragover = function(ev)
    {
        var ev = ev||window.event;
        //要想觸發drop事件，必須在dragover中阻止預設事件
        ev.preventDefault();
    }
    oDiv.ondragleave = function()
    {
        this.style.background = "pink";
    }
    oDiv.ondrop = function(ev)
    {
        ev = ev || window.event;
        this.style.background = "pink";
        alert(ev.dataTransfer.getData("index"));
        if(oUl.hasChildNodes()) //當ul下還存在子節點時
        {
            oUl.removeChild(oli[ev.dataTransfer.getData("index")]);
        }
    }
 </script>
 </body>

二. 外部檔案拖放

dataTransfer物件的files

獲取外部拖拽的檔案，返回一個filesList列表，filesList下有個type屬性，返回檔案的型別。

FileReader(讀取檔案資訊)

  • readAsDataURL:引數為要讀取的檔案物件，將檔案讀取為DataUrl
  • onload
    當讀取檔案成功完成的時候觸發
    this.result，來獲取讀取的檔案資料，如果是圖片，將返回base64格式的圖片資料
 <style type="text/css">
    #div1{

        width: 200px;
        height: 200px;
        margin: 100px auto;
        background: red;
    }
 </style>
 <body>
    <div id="div1">將檔案拖放至此區域</div>
    <ul id="ul1"></ul>
    <script type="text/javascript">
    var oDiv = document.getElementById("div1");
    var oUl = document.getElementById("ul1");
    oDiv.ondragenter = function()
    {
        this.innerHTML = "滑鼠可以釋放";
    }
    oDiv.ondragleave = function()
    {
        this.innerHTML = "將檔案拖放至此區域";
    }
    oDiv.ondragover = function(ev)
    {
        var ev = ev || window.event;
        ev.preventDefault();
    }
    oDiv.ondrop = function(ev)
    {
        var ev = ev || window.event;
        ev.preventDefault();
        var fs = ev.dataTransfer.files;
        alert(fs[0].type);
        var fd = new FileReader();
        fd.readAsDataURL(fs[0]);
        fd.onload = function()
        {
            // alert(this.result);
            var li = document.createElement("li");
            var img = document.createElement("img");
            img.src = this.result;
            li.appendChild(img);
            oUl.appendChild(li);
        }

    }
    </script>
 </body>

相關文章