Vue實現DOM元素拖放互換位置示例

一、拖放和釋放

HTML 拖放接口使得 web 應用能夠在網頁中拖放文件。這裡將介紹瞭 web 應用如何接受從底層平臺的文件管理器拖動DOM的操作。

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

觸發 drop 事件的目標元素需要一個ondrop 事件處理函數。下面這一段代碼以一個 <div> 元素為例展示瞭這些工作是如何完成的:

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

一般來說,在實際應用中需要定義一個 dragover 事件的處理函數並在其中加入關閉瀏覽器默認拖放行為的代碼。需要定義一個 ondragover 事件處理函數:

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

二、可拖拽屬性

在一個網頁中,有幾種特定情況會使用默認拖拽行為,其中包括拖拽選中文本、拖拽圖像和拖拽鏈接。當一個圖像或鏈接被拖拽時,圖像或鏈接的 URL 被設定為拖拽數據。對於其他元素,隻當它們是被選中的一部分時,才會觸發默認拖拽行為。如果想看看拖拽實際的樣子,可以選中網頁的一部分,然後按住鼠標,拖動選中的目標。選中的部分根據系統的不同會有不同的渲染效果,並在拖拽時跟隨著鼠標指針。然而,這隻是默認拖拽行為的效果,此時沒有監聽程序調整拖拽數據。

在 HTML 中,除瞭圖像、鏈接和選擇的文本默認的可拖拽行為之外,其他元素在默認情況下是不可拖拽的。

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

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

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

draggable 屬性可在任意元素上設置,包括圖像和鏈接。然而,對於後兩者,該屬性的默認值是 true,所以你隻會在禁用這二者的拖拽時使用到 draggable 屬性,將其設置為 false。

三、DataTransfer

DataTransfer 對象用於保存拖動並放下(drag and drop)過程中的數據。它可以保存一項或多項數據,這些數據項可以是一種或者多種數據類型。

3.1 屬性

dropEffect

獲取當前選定的拖放操作類型或者設置的為一個新的類型。值必須為 none, copy, link 或 move。

effectAllowed

提供所有可用的操作類型。必須是 none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized 之一。

files

包含數據傳輸中可用的所有本地文件的列表。如果拖動操作不涉及拖動文件,則此屬性為空列表。

items

提供一個包含所有拖動數據列表的 DataTransferItemList 對象。

types

一個提供 dragstart 事件中設置的格式的 strings 數組。

3.2 方法

clearData()

刪除與給定類型關聯的數據。類型參數是可選的。如果類型為空或未指定,則刪除與所有類型關聯的數據。如果指定類型的數據不存在,或者 data transfer 中不包含任何數據,則該方法不會產生任何效果。

getData()

檢索給定類型的數據,如果該類型的數據不存在或 data transfer 不包含數據,則返回空字符串。

setData()

設置給定類型的數據。如果該類型的數據不存在,則將其添加到末尾,以便類型列表中的最後一項將是新的格式。如果該類型的數據已經存在,則在相同位置替換現有數據。

setDragImage()

用於設置自定義的拖動圖像。

四、DataTransferItem

DataTransferItem 描述瞭一個拖拽項。在一個拖拽操作*中,*每一個 drag event 都有一個dataTransfer 屬性,它包含一個存有拖拽數據的 list ,其中每一項都是一個 DataTransferItem 。

4.1 屬性

kind

拖拽項的種類,string 或是 file。

type

拖拽項的類型,一般是一個 MIME 類型。

4.2 方法

getAsFile()

返回一個關聯拖拽項的 File 對象(當拖拽項不是一個文件時返回 null)。

getAsString()

使用拖拽項的字符串作為參數執行指定回調函數。

webkitGetAsEntry()

返回一個基於 FileSystemEntry 的對象來表示文件系統中選中的項目。通常是返回一個FileSystemFileEntry 或是 FileSystemDirectoryEntry 對象。

五、DataTransferItemList

5.1 屬性

length

無符號長整型 :列表中拖動項的數量。

5.2 方法

add()

向拖動項列表中添加新項 (File對象或string),該方法返回一個 DataTransferItem 對象。

remove()

根據索引刪除拖動項列表中的對象。

clear()

清空拖動項列表。

DataTransferItem()

取值方法:返回給定下標的DataTransferItem對象。

六、Event事件

drag

在用戶拖動元素或選擇的文本時,每隔幾百毫秒就會被觸發一次。

dragend

在拖放操作結束時觸發(通過釋放鼠標按鈕或單擊 escape 鍵)。

dragenter

在可拖動的元素或者被選擇的文本進入一個有效的放置目標時觸發。目標對象是用戶直接選擇的范圍(由用戶直接指示作為放置目標的元素),或者 <body> 元素。

dragleave

在拖動的元素或選中的文本離開一個有效的放置目標時被觸發。

dragover

在可拖動的元素或者被選擇的文本被拖進一個有效的放置目標時(每幾百毫秒)觸發。該事件在放置目標上觸發。

dragstart

在用戶開始拖動元素或被選擇的文本時調用。

drop

在元素或選中的文本被放置在有效的放置目標上時被觸發。

七、實例

在通過上述的瞭解,咱們已經知道JS拖拽功能的相關接口,這次我們將通過它們來實現元素的位置調換。如下圖,我們將時間從亂序中,移動為正常排序。

7.1 html代碼

由於drag Event綁定在el-tag上無效,這裡外面包裹層div來實現元素的拖拽事件綁定。

<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事件想要被觸發,必須綁定dragover事件,並在dragover事件中執行e.preventDefault()。未綁定dragover事件,則drop事件將不會被觸發。

在第三節,已講解瞭dataTransfer屬性和方法,我們可能通過它進行數據的傳遞。如dragstartEvent()函數中將被拖拽元素的索引,通過setData存儲到起來,在dragdropEvent()事件執行後,再通過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);
            },
            /**
             * 元素經過某元素位置時,執行事件
             */
            dragoverEvent(e, i){
                e.preventDefault();
            },
            /**
             * 放開元素時執行
             */
            dragdropEvent(e, i){
                let startIndex = e.dataTransfer.getData('start');
                if(startIndex||0==startIndex){
                    //記錄被拖動元素內容
                    let startVal = this.recordList[startIndex];    
                    //刪除被拖動位置元素
                    this.recordList.splice(startIndex, 1);
                    //將被拖動元素插入數組指定位置
                    this.recordList.splice(i, 0, startVal);    
                    //清除記錄數據
                    e.dataTransfer.clearData();    
                }
            },
        }
    }
</script>

通過這個小案例,在Vue中將元素變成可拖拽的,實現瞭以拖拽方式更換瞭元素的位置,希望對大傢有所幫助。

到此這篇關於Vue實現DOM元素拖放互換位置示例的文章就介紹到這瞭,更多相關Vue DOM元素拖放互換內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: