HTML5 拖拽draggable

属性

• draggable 属性：就是标签元素要设置draggable=true，否则不会有效果。

<div title="拖拽我" draggable="true">列表1</div>

事件

//用在被拖拽元素上

• ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
• drag：被拖动的元素在拖动过程中持续触发,此事件作用在被拖曳元素上
• ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上

//用在目标元素上

• ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

• ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

• ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上

• Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

• Event.effectAllowed 属性：就是拖拽的效果。

对象

• DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
  dataTransfer对象的方法：

setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。

实例

<div id="box"></div>


    <div id="drag_box" draggable="true"></div>
    

    <script>
        //获取被拖动的元素、
        var dragBox = document.querySelector("#drag_box");
        //获取目标元素
        var box = document.querySelector("#box");
        //给目标元素绑定事件
        box.addEventListener("dragenter", function(){
            this.classList.add('over');
        }, false);
        box.addEventListener("dragleave", function(){
            this.classList.remove("over");
        }, false);
        box.addEventListener("dragover", function(e){
            e.preventDefault();  //阻止默认的动作
        }, false);

        box.addEventListener("drop", function(e){
            //把被拖拽的元素 放入目标元素            
        this.appendChild(document.getElementById(e.dataTransfer.getData('dragElement')));
            //样式恢复
            this.classList.remove("over");
        },false);
        //给被拖拽的元素绑定事件
        dragBox.addEventListener("dragstart", function(e){
            //把被拖拽的元素放入dataTransfer
            e.dataTransfer.setData('dragElement', this.id);
        }, false);

实例二，将电脑文件夹中的图片拖拽到页面当中去

<h3>请把文件夹中的图片拖到下面区域</h3>    
    <div id="box"></div>    
    <script>        
        //获取目标元素
        var box = document.querySelector("#box");
        //给目标元素绑定事件
        box.addEventListener("dragenter", function(){
            this.classList.add('over');
        }, false);
        box.addEventListener("dragleave", function(){
            this.classList.remove("over");
        }, false);
        box.addEventListener("dragover", function(e){
            e.preventDefault();  //阻止默认的动作
        }, false);
        box.addEventListener("drop", function(e){
            e.preventDefault(); //阻止浏览器默认行为
            console.log(e)
            //遍历FileList
            [].forEach.call(e.dataTransfer.files, function(itemFile){
                //读取文件
                readImage(itemFile);
            })
            this.classList.remove("over");  //恢复样式
        },false);
        /**
         * 读取图片
         * @param File  fileObj 
        */
        function readImage(fileObj) {
            //创建FileReader对象
            var frObj = new FileReader();

            //监听读取成功
            frObj.onload = function(){
                var img = document.createElement("img");
                img.src = frObj.result;
                document.querySelector("#box").appendChild(img);
            }
            //读取
            frObj.readAsDataURL(fileObj);
        }