文件拖拽

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注意即使元素可以拖拽，在拖拽的过程中（ondragover）默认情况下是无法将数据、元素放到其他元素中的，如果需要允许，就要阻止默认处理；

拖拽API

draggable ：
–    设置为true，元素就可以拖拽了

拖拽元素事件 :  事件对象为被拖拽元素
–    dragstart ,  拖拽前触发 
–    drag ,拖拽前、拖拽结束之间，连续触发
–    dragend  , 拖拽结束触发

目标元素事件 :  事件对象为目标元素
–    dragenter ,  进入目标元素触发，相当于mouseover
–    dragover  ,进入目标、离开目标之间，连续触发
–    dragleave ,  离开目标元素触发，相当于mouseout
–    drop  ,  在目标元素上释放鼠标触发

Demo1-拖拽删除

效果示例

完整代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
        li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
        #div1{ width:100px; height:100px; background:red; margin:200px;}
    </style>
</head>

<body>
    <ul>
        <li draggable="true">a</li>
        <li draggable="true">b</li>
        <li draggable="true">c</li>
    </ul>
    <div id="div1"></div>
    <script>
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        var oUl=document.getElementsByTagName('ul')[0];
        var oDiv = document.getElementById('div1');
        var oImg = document.getElementById('img1');

        for(var i=0;i<aLi.length;i++){
            aLi[i].index = i;
            aLi[i].ondragstart = function(ev){
                ev.dataTransfer.setData('name',this.index);
                this.style.background = 'green';
                //ev.dataTransfer.setDragImage(this,0,0); //设置拖动时显示的对象和坐标
            };

            aLi[i].ondrag = function(){  //开始与结束连续触发
                document.title = i++;
            };

            aLi[i].ondragend = function(){
                this.style.background = 'yellow';
            };
        }

        oDiv.ondragenter = function(){
            this.style.background = 'blue';
        };

        oDiv.ondragover = function(ev){
            //enter和leave之间连续触发
            document.title = i++;
            //要想触发drop事件，就必须在dragover当中阻止默认事件
            ev.preventDefault();
        };

        oDiv.ondragleave = function(){
            this.style.background = 'red';
        };

        oDiv.ondrop = function(ev){
            ev.preventDefault();   //阻止默认事件，不然是外部图片就直接打开了
            var n=ev.dataTransfer.getData('name');
            // ev.dataTransfer.clearData("name");
            oUl.removeChild( aLi[n]); //删除以后要从新算index
            for(var i=0;i<aLi.length;i++){
                aLi[i].index = i;
            }
            this.style.background = 'red';    
        };    
    };
    </script>
</body>
</html>

Demo2-外部文件拖入显示

效果示例

完整代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
    ul,li{ margin:0;padding:0;list-style:none;}
    div{
        width:200px; height:200px; background:red; text-align:center;
    }
    ul{
        width:600px; background-color:#000; 
    }
    li {
        margin:10px 20px;
    }
    ul:after {
        content:'';
        display:block;
        clear:both;
    }
    </style>
</head>

<body>
    <div>把图片拖到这里</div>
    <ul></ul>

    <script>
    window.onload=function(){
        var oDiv = document.querySelector('div');
        var oUl = document.querySelector('ul');
        oDiv.ondragenter=function(){
            this.innerHTML='可以松开了哦';
        }
        oDiv.ondragover=function(ev){
            var ev=ev||event;
            ev.preventDefault(); 
        }
        oDiv.ondragleave=function(){
            this.innerHTML='把图片拖到这里';
        }
        oDiv.ondrop=function(ev){
            var ev=ev||event;
            ev.preventDefault(); //阻止默认事件，不然是外部图片就直接打开了
            this.innerHTML='把图片拖到这里';

            var fs=ev.dataTransfer.files; //拖拽的文件集合
            for(var i=0; i<fs.length; i++){
                if(fs[i].type.indexOf('image')!=-1){ //判断拖拽内容的类型是image
                    var fd=new FileReader();  //创建可以读文件的对象
                    fd.readAsDataURL(fs[i]);  //读
                    fd.onload=function(){  //读取成功直接执行onload
                        var oLi    =document.createElement('li');
                        oLi.style.float='left';
                        var oImg= document.createElement('img');
                        oImg.style.height='200px';
                        oImg.src = this.result;  //地址就是获取到的url信息
                        oLi.appendChild(oImg);
                        oUl.appendChild(oLi);
                    }
                }else{
                    alert('非法图片');
                }
            }
        }
    }

    </script>
</body>
</html>

2016-12-21