3.1 拖拽屬性

draggable：auto | true | false

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

3.2 拖動(dòng)事件

3.3 拖操作

    <div id="mydiv" draggable="true"></div>
    <script>
        // 拖放操作
        let mydiv = document.getElementById('mydiv')
        //開始拖放
        mydiv.ondragstart = function(){
            console.log('開始拖放');
        }
        // 正在拖放
        mydiv.ondrag = function(){
            console.log('正在拖放');
        }
        // 結(jié)束拖放
        mydiv.ondragend = function(){
            console.log('正在拖放'); 
        }
    </script>

3.4 放操作

注意：放操作中 ”dragover和drop“ 會(huì)發(fā)生沖突，需要阻止 dragover 的默認(rèn)事件（ e.preventDefault() ）

<div id="put" draggable="true"></div>
<script>
        // 放操作
        let myput = document.getElementById('put')
        // 進(jìn)入
        myput.ondragenter = function(e){
            console.log('進(jìn)入了');
        }
        // 進(jìn)故宮
        myput.ondragover = function(e){
            console.log('經(jīng)過了');
            // 阻止默認(rèn)事件
            e.preventDefault();
        }
        // 離去
        myput.ondragleave = function(){
            console.log('離去了');
        }
        // 放下
        myput.ondrop = function(){
            console.log('放下了');   
        }
</script>

3.5 拖和放的API操作

3.5.1 拖放事件

一般在一個(gè)元素開始被拖拽的時(shí)候，觸發(fā)dragstart時(shí)候設(shè)置與這次拖拽相關(guān)的信息弧烤，例如拖動(dòng)的數(shù)據(jù)和圖像。所有的拖拽事件都有一個(gè)屬性——dataTransfer源武，它包含著拖拽數(shù)據(jù)扼褪。

3.5.2 dataTransfer的屬性說明

3.5.3 演示示例：

    <div id="contains"></div>
    <div id="div1" class="myBlock" draggable="true">1</div>
    <div id="div2" class="myBlock" draggable="true">2</div>
    <div id="div3" class="myBlock" draggable="true">3</div>
    <div id="div4" class="myBlock" draggable="true">4</div>
    <div id="div5" class="myBlock" draggable="true">5</div>
    <script>
        // 元素的拖
        let myBlock = document.querySelectorAll('.myBlock')
        for(let i = 0; i< myBlock.length; i++){
            myBlock[i].ondragstart = function(e){
                // dataTransfer是 event事件
                // 儲(chǔ)存id
                e.dataTransfer.setData('id',this.id)
                // 設(shè)置拖放時(shí) 物體的顯示
                let img = new Image();
                img.src = './素材.jpg'
                e.dataTransfer.setDragImage(img,img.width/2,img.height/2)
                // 為啥 第一次不顯示？
            }
        }
        
        // 放
        let contains = document.getElementById('contains')
        // 1嗅定，阻止 ondragover的默認(rèn)事件
        contains.ondragover = function(e){
            e.preventDefault();
            
        }
        // 托 的元素放下時(shí)
        contains.ondrop = function(e){
            // 獲取之前存儲(chǔ)的 id
            let id = e.dataTransfer.getData('id')
            // 根據(jù)id 獲取當(dāng)前元素
            let div = document.getElementById(id)
            this.appendChild(div)
            
        }
    </script>

3.5.4 外部文件的操作

注意： 托外部文件需要取消 ondrop 的默認(rèn)事件自娩，否則會(huì)打開這個(gè)文件

<script>

        let html = document.documentElement;
        // 取消默認(rèn)事件,防止打開文件
        html.ondragover = function(e){
            e.preventDefault();
        }
        // 文件拖放
        html.ondrop = function(e){
            // 取消默認(rèn)事件
            e.preventDefault()

            let img = new Image();
            // 獲取文件路徑
            img.src = window.URL.createObjectURL(e.dataTransfer.files[0])
            img.style.top = e.pageY + 'px';
            img.style.left = e.pageX + 'px';
            document.body.appendChild(img)
            
        }
 </script>