drag

1、draggable ="true"  元素可以拖拽了

2、拖拽元素事件：

　　dragstart  拖拽前触发

　　drag　　拖拽前、拖拽结束之间，连续触发

　　dragend 拖拽结束触发

3、目标元素事件：

　　dragenter　　进入目标元素触发

　　dragover　　在目标元素移动触发

　　dragleave　　离开目标元素触发

　　drop　　在目标元素上释放鼠标触发，必须在dragover中阻止默认事件，drop才会起作用。

4、执行顺序：

　　drop不触发的时候：

　　　　dragstart-->drag[不动也会N次触发]-->dragenter-->(dragover-->drag)[移动就会N次触发dragover-->drag]-->dragleave-->dragend

　　drop触发的时候：

　　　　dragstart-->drag[不动也会N次触发]-->dragenter-->(dragover-->drag)[移动就会N次触发dragover-->drag]-->dragover-->drop-->dragend

5、dataTransfer  对象，在event下。

　　1、ev.dataTransfer.setData(key,value) --> ev.dataTransfer.setData('test','abc')   可解决在火狐下的问题

　　2、ev.dataTransfer.effectAllowed = 'copy'  光标的样式，(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

　　3、ev.dataTranfer.setDragImage(obj,0,0)  设置拖拽时显示的图和位置

 

例子：

    <div draggable="true" id="div1"></div>
    <div id="div2"></div>

    <script type="text/javascript">
        var oDiv1 = document.getElementById('div1'),
            oDiv2 = document.getElementById('div2');

        oDiv1.ondragstart = function(ev){
            var ev = ev || event;
            ev.dataTransfer.setData('test','abc');  //设置后，在火狐中拖拽才有用
            ev.dataTransfer.effectAllowed = 'copy';  //设置目标元素鼠标的样式
            ev.dataTransfer.setDragImage(oDiv2,0,0); //设置拖拽时显示的图和位置
            console.log('开始拖拽');
        };
        oDiv1.ondrag = function(){
            console.log('拖拽过程中....');
        };
        oDiv1.ondragend = function(){
            console.log('拖拽完成');
        };
        oDiv2.ondragenter = function(){
            console.log('拖拽进入放置元素');
        };
        oDiv2.ondragover = function(ev){
            console.log('在放置元素内移动');
            ev.preventDefault();   //必须阻止默认事件，ondrop才会起作用
        };
        oDiv2.ondragleave = function(){
            console.log('拖拽离开放置元素');
        };
        oDiv2.ondrop = function(ev){
            console.log(ev.dataTransfer.getData('test'));
            console.log('释放鼠标');
        };

 　　4、ev.dataTransfer.files  -->外部文件的集合（列表）

　　　　ev.dataTransfer.files[i] -->第i个文件

　　　　ev.dataTransfer.files.length  -->列表长度

　　　　ev.dataTransfer.files[i].type -->文件类型：image/png、image/jpeg、text/plain等

6、FileReader 读取文件信息

　　　　var fd = new FileReader();  

　　　　fd.readAsDataURL(文件);  // 文件信息

　　　　fd.onload = function(){  //文件读取成功，触发

　　　　　　console.log(this.result)   //文件数据

　　　　};

 

例子：

 

        <div id="div1"  draggable="true" >将文件拖拽到此区域</div>
        <script type="text/javascript">
            var oDiv1 = document.getElementById('div1');
            oDiv1.ondragenter = function  () {
                this.innerHTML = '可以释放了';
            };
            oDiv1.ondragover = function(ev){
                var ev = ev || event;
                ev.preventDefault();   //为了drop有效
            };
            oDiv1.ondragleave = function(){
                this.innerHTML = '将文件拖拽到此区域';
            };
            oDiv1.ondrop = function(ev) {
                var ev = ev || event;
                var fs = ev.dataTransfer.files;
                console.log(fs.length);  //列表长度
                console.log(fs[0].type); //文件的类型

                for (var i=0;i<fs.length;i++) {
                    if (fs[i].type.indexOf('image') != -1) {  //判断是否是图片？
                        var fd = new FileReader();  
                        fd.readAsDataURL(fs[i]);
                        fd.onload = function(){

                            oUl = document.createElement('ul');
                            oLi = document.createElement('li');
                            oImg = document.createElement('img');
                            oImg.src = this.result;  //this.result为文件数据
                            oImg.style.width = '100px';
                            oLi.appendChild(oImg);
                            oUl.appendChild(oLi);
                            document.body.appendChild(oUl);

                        };                    
                    } else {
                        alert('不是图片');
                    }                    
                }



                ev.preventDefault(); //防止文件拖拽到目标元素时，打开文件
            };
        </script>