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>

　　　　

總結

以上是生活随笔為你收集整理的drag的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。