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

2、拖拽元素事件：

　　dragstart 拖拽前觸發(fā)

　　drag　　拖拽前、拖拽結(jié)束之間，連續(xù)觸發(fā)

　　dragend拖拽結(jié)束觸發(fā)

3、目標(biāo)元素事件：

　　dragenter　　進(jìn)入目標(biāo)元素觸發(fā)

　　dragover　　在目標(biāo)元素移動(dòng)觸發(fā)

　　dragleave　　離開(kāi)目標(biāo)元素觸發(fā)

　　drop　　在目標(biāo)元素上釋放鼠標(biāo)觸發(fā)，必須在dragover中阻止默認(rèn)事件，drop才會(huì)起作用。

4、執(zhí)行順序：

　　drop不觸發(fā)的時(shí)候：

　　　　dragstart-->drag[不動(dòng)也會(huì)N次觸發(fā)]-->dragenter-->(dragover-->drag)[移動(dòng)就會(huì)N次觸發(fā)dragover-->drag]-->dragleave-->dragend

　　drop觸發(fā)的時(shí)候：

　　　　dragstart-->drag[不動(dòng)也會(huì)N次觸發(fā)]-->dragenter-->(dragover-->drag)[移動(dòng)就會(huì)N次觸發(fā)dragover-->drag]-->dragover-->drop-->dragend

5、dataTransfer 對(duì)象，在event下。

　　1、ev.dataTransfer.setData(key,value) --> ev.dataTransfer.setData('test','abc') 可解決在火狐下的問(wèn)題

　　2、ev.dataTransfer.effectAllowed = 'copy' 光標(biāo)的樣式，(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

　　3、ev.dataTranfer.setDragImage(obj,0,0) 設(shè)置拖拽時(shí)顯示的圖和位置

例子：

    <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');  //設(shè)置后，在火狐中拖拽才有用
            ev.dataTransfer.effectAllowed = 'copy';  //設(shè)置目標(biāo)元素鼠標(biāo)的樣式
            ev.dataTransfer.setDragImage(oDiv2,0,0); //設(shè)置拖拽時(shí)顯示的圖和位置
            console.log('開(kāi)始拖拽');
        };
        oDiv1.ondrag = function(){
            console.log('拖拽過(guò)程中....');
        };
        oDiv1.ondragend = function(){
            console.log('拖拽完成');
        };
        oDiv2.ondragenter = function(){
            console.log('拖拽進(jìn)入放置元素');
        };
        oDiv2.ondragover = function(ev){
            console.log('在放置元素內(nèi)移動(dòng)');
            ev.preventDefault();   //必須阻止默認(rèn)事件，ondrop才會(huì)起作用
        };
        oDiv2.ondragleave = function(){
            console.log('拖拽離開(kāi)放置元素');
        };
        oDiv2.ondrop = function(ev){
            console.log(ev.dataTransfer.getData('test'));
            console.log('釋放鼠標(biāo)');
        };

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

　　　　ev.dataTransfer.files[i] -->第i個(gè)文件

　　　　ev.dataTransfer.files.length -->列表長(zhǎng)度

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

6、FileReader 讀取文件信息

　　　　var fd = new FileReader();

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

　　　　fd.onload = function(){ //文件讀取成功，觸發(fā)

　　　　　　console.log(this.result) //文件數(shù)據(jù)

　　　　};

例子：

        <div id="div1"  draggable="true" >將文件拖拽到此區(qū)域</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 = '將文件拖拽到此區(qū)域';
            };
            oDiv1.ondrop = function(ev) {
                var ev = ev || event;
                var fs = ev.dataTransfer.files;
                console.log(fs.length);  //列表長(zhǎng)度
                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為文件數(shù)據(jù)
                            oImg.style.width = '100px';
                            oLi.appendChild(oImg);
                            oUl.appendChild(oLi);
                            document.body.appendChild(oUl);

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



                ev.preventDefault(); //防止文件拖拽到目標(biāo)元素時(shí)，打開(kāi)文件
            };
        </script>

　　　　

總結(jié)

以上是生活随笔為你收集整理的drag的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。