一、拖放和釋放

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

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

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

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

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

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

二、可拖拽屬性

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

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

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

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

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

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

三、DataTransfer

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

3.1 屬性

3.2 方法

四、DataTransferItem

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

4.1 屬性

4.2 方法

五、DataTransferItemList

5.1 屬性

5.2 方法

六、Event事件

七、實(shí)例

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

7.1 html代碼

由于drag Event綁定在el-tag上無效，這里外面包裹層div來實(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事件將不會被觸發(fā)。

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

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

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

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

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

最新評論