一、拖放和釋放

HTML 拖放接口使得 web 應(yīng)用能夠在網(wǎng)頁(yè)中拖放文件。這里將介紹了 web 應(yīng)用如何接受從底層平臺(tái)的文件管理器拖動(dòng)DOM的操作。

拖放的主要步驟是為 drop 事件定義一個(gè)釋放區(qū)(釋放文件的目標(biāo)元素) 和為dragover事件定義一個(gè)事件處理程序。

觸發(fā) drop 事件的目標(biāo)元素需要一個(gè)ondrop 事件處理函數(shù)。下面這一段代碼以一個(gè) <div> 元素為例展示了這些工作是如何完成的：

<div id="drop_zone" ondrop="dropHandler(event);">
  <p>Drag one or more files to this Drop Zone ...</p>
</div>

一般來(lái)說(shuō)，在實(shí)際應(yīng)用中需要定義一個(gè) dragover 事件的處理函數(shù)并在其中加入關(guān)閉瀏覽器默認(rèn)拖放行為的代碼。需要定義一個(gè) ondragover 事件處理函數(shù)：

<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
  <p>Drag one or more files to this Drop Zone ...</p>
</div>

二、可拖拽屬性

在一個(gè)網(wǎng)頁(yè)中，有幾種特定情況會(huì)使用默認(rèn)拖拽行為，其中包括拖拽選中文本、拖拽圖像和拖拽鏈接。當(dāng)一個(gè)圖像或鏈接被拖拽時(shí)，圖像或鏈接的 URL 被設(shè)定為拖拽數(shù)據(jù)。對(duì)于其他元素，只當(dāng)它們是被選中的一部分時(shí)，才會(huì)觸發(fā)默認(rèn)拖拽行為。如果想看看拖拽實(shí)際的樣子，可以選中網(wǎng)頁(yè)的一部分，然后按住鼠標(biāo)，拖動(dòng)選中的目標(biāo)。選中的部分根據(jù)系統(tǒng)的不同會(huì)有不同的渲染效果，并在拖拽時(shí)跟隨著鼠標(biāo)指針。然而，這只是默認(rèn)拖拽行為的效果，此時(shí)沒(méi)有監(jiān)聽(tīng)程序調(diào)整拖拽數(shù)據(jù)。

在 HTML 中，除了圖像、鏈接和選擇的文本默認(rèn)的可拖拽行為之外，其他元素在默認(rèn)情況下是不可拖拽的。

要使其他的 HTML 元素可拖拽，必須做三件事：

• 將想要拖拽的元素的 draggable 屬性設(shè)置成 draggable="true"。
• 為 [dragstart]事件添加一個(gè)監(jiān)聽(tīng)程序。
• 在上一步定義的監(jiān)聽(tīng)程序中 設(shè)置拖拽數(shù)據(jù)。

屬性 draggable 設(shè)置為 "true"，所以這個(gè)元素變成可拖拽的。如果該屬性被省略或被設(shè)置為 "false"，則該元素將不可拖拽，此時(shí)拖拽只會(huì)選中文本。

draggable 屬性可在任意元素上設(shè)置，包括圖像和鏈接。然而，對(duì)于后兩者，該屬性的默認(rèn)值是 true，所以你只會(huì)在禁用這二者的拖拽時(shí)使用到 draggable 屬性，將其設(shè)置為 false。

三、DataTransfer

DataTransfer 對(duì)象用于保存拖動(dòng)并放下（drag and drop）過(guò)程中的數(shù)據(jù)。它可以保存一項(xiàng)或多項(xiàng)數(shù)據(jù)，這些數(shù)據(jù)項(xiàng)可以是一種或者多種數(shù)據(jù)類(lèi)型。

3.1 屬性

3.2 方法

四、DataTransferItem

DataTransferItem 描述了一個(gè)拖拽項(xiàng)。在一個(gè)拖拽操作*中，*每一個(gè) drag event 都有一個(gè)dataTransfer 屬性，它包含一個(gè)存有拖拽數(shù)據(jù)的 list ，其中每一項(xiàng)都是一個(gè) DataTransferItem 。

4.1 屬性

4.2 方法

五、DataTransferItemList

5.1 屬性

5.2 方法

六、Event事件

七、實(shí)例

在通過(guò)上述的了解，咱們已經(jīng)知道JS拖拽功能的相關(guān)接口，這次我們將通過(guò)它們來(lái)實(shí)現(xiàn)元素的位置調(diào)換。如下圖，我們將時(shí)間從亂序中，移動(dòng)為正常排序。

7.1 html代碼

由于drag Event綁定在el-tag上無(wú)效，這里外面包裹層div來(lái)實(shí)現(xiàn)元素的拖拽事件綁定。

<div @dragstart="dragstartEvent($event, index)"
            @dragover="dragoverEvent($event, index)"
            @drop="dragdropEvent($event, index)" 
            v-for="(tag, index) in recordList" 
            :key="tag" 
            style="display: inline-block;">
        <el-tag  closable 
                @close="removeTagEvent(tag)" 
                type="info" 
                draggable>{{tag}}</el-tag>
</div>

7.2 JS代碼

這里需要注意的是，drop事件想要被觸發(fā)，必須綁定dragover事件，并在dragover事件中執(zhí)行e.preventDefault()。未綁定dragover事件，則drop事件將不會(huì)被觸發(fā)。

在第三節(jié)，已講解了dataTransfer屬性和方法，我們可能通過(guò)它進(jìn)行數(shù)據(jù)的傳遞。如dragstartEvent()函數(shù)中將被拖拽元素的索引，通過(guò)setData存儲(chǔ)到起來(lái)，在dragdropEvent()事件執(zhí)行后，再通過(guò)getData獲取被拖拽元素的索引。

在將被拖拽元素插入到新位置前，我們需要通過(guò)splice將原位置的刪除，再通過(guò)splice將其插入新的位置，代碼如下：

<script>
    export default {
        data(){
            return {
                recordList: ['08:30', '22:45', '09:00', '23:30', '09:00', '04:30']
            }
        },
        methods: {
            /**
             * 開(kāi)始拖拉元素的值 索引位置
             */
            dragstartEvent(e, i){
                e.dataTransfer.setData('start', i);
            },
            /**
             * 元素經(jīng)過(guò)某元素位置時(shí)，執(zhí)行事件
             */
            dragoverEvent(e, i){
                e.preventDefault();
            },
            /**
             * 放開(kāi)元素時(shí)執(zhí)行
             */
            dragdropEvent(e, i){
                let startIndex = e.dataTransfer.getData('start');
                if(startIndex||0==startIndex){
                    //記錄被拖動(dòng)元素內(nèi)容
                    let startVal = this.recordList[startIndex];    
                    //刪除被拖動(dòng)位置元素
                    this.recordList.splice(startIndex, 1);
                    //將被拖動(dòng)元素插入數(shù)組指定位置
                    this.recordList.splice(i, 0, startVal);    
                    //清除記錄數(shù)據(jù)
                    e.dataTransfer.clearData();    
                }
            },
        }
    }
</script>

通過(guò)這個(gè)小案例，在Vue中將元素變成可拖拽的，實(shí)現(xiàn)了以拖拽方式更換了元素的位置，希望對(duì)大家有所幫助。

到此這篇關(guān)于Vue實(shí)現(xiàn)DOM元素拖放互換位置示例的文章就介紹到這了,更多相關(guān)Vue DOM元素拖放互換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！