drag/drop 拖拽与拖放学习

今日工作中有拖拽功能的需求，随记录下drag相关的知识。

重点知识

datatransfer:用于存储拖拽的数据。
draggable：元素需要设置draggable=“true”,不然元素无法拖拽。
dragstart：当元素被拖拽时的时候触发，此事件作用在拖拽元素上。
dragenter：当元素进入目标元素时触发，事件作用在目标元素上。
dragover：拖拽元素在目标元素上移动时候触发，事件作用在目标元素上。需要注意的是，需要对document进行dragover事件，并阻止默认事件，否则drop不能响应。
dragend：拖拽元素完成后触发，事件作用的拖拽元素上。
drop：被拖拽元素在目标元素上鼠标放开的时候出发，事件作用在目标元素上。

demo实例

demo链接
drag-list元素经过拖拽至于任意的li元素里面。
相关代码：html

        
drag-list
        

        

        

    

js

var dragged;
        document.getElementById('draggable').addEventListener('dragstart ',function(event){
            event.dataTransfer.setData('text/plain',null)
        },false)
        document.addEventListener('drag',function(event)    {

        },false)

        document.addEventListener('dragstart',function(event){
            console.log(event.target);
            dragged=event.target;

            event.target.style.opacity=0.5;
        },false)
        document.addEventListener('dragend',function(event){
            event.target.style.opacity='';
        },false)

        document.addEventListener('dragover',function(event){
            // 阻止default to allow drop
            event.preventDefault();
        },false)

        document.addEventListener('dragenter',function(event){
            if(event.target.className=='dropzone'){
                event.target.style.background='purple';
            }
        },false)

        document.addEventListener('dragleave',function(event){
            if(event.target.className=='dropzone'){
                event.target.style.background='';
            }
        },false)

        document.addEventListener('drop',function(event){
            event.preventDefault();
            if(event.target.className=='dropzone'){
                event.target.style.background='';
                dragged.parentNode.removeChild(dragged);
                event.target.appendChild(dragged);
            }
        },false)

结：更多demo继续码字中。比如上传时，桌面拖拽显示、qq浏览器九宫格的个性显示等应用。