vue拖拽組件vuedraggable使用說明詳解

更新時間：2022年04月06日 10:41:57 作者：兮木兮木

這篇文章主要為大家詳細介紹了vue拖拽組件vuedraggable的使用說明，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue拖拽組件vuedraggable的使用說明，供大家參考，具體內容如下

需了解H5的draggable屬性，通過下面的代碼注釋，可了解

<!DOCTYPE html>
? <html lang="en">
? <head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? .box {
? ? ? ? width:500px;
? ? ? ? height: 150px;
? ? ? ? border:1px solid black;
? ? ? ? margin-top: 40px;
? ? ? }
? ? </style>
??
? ? <script>
? ? ? function dragstart(event) {
??
? ? ? ?/*
? ? ? ?* 當拖拽元素時，會觸發(fā)dragstart事件，拖拽對象是通過事件對象event中的dataTransfer來傳輸數據的
? ? ? ?* 通過event.dataTransfer.setData("dragContent", event.target.id)
? ? ? ?* 將拖拽對象id存儲在dataTransfer中
? ? ? ?* */
? ? ? ? event.dataTransfer.setData("dragContent", event.target.id);
? ? ? }
??
? ? ? function drop(event){
? ? ? ? event.preventDefault();
? ? ? ? /*
? ? ? ? * 把元素放到目標元素上時，松開鼠標觸發(fā)drop事件，
? ? ? ? * 通過event.dataTransfer.getData('dragContent')取出剛才存起來的id
? ? ? ? * 然后通過node.appendChild()把拖拽對象放入目標容器中
? ? ? ? * */
? ? ? ? let data = event.dataTransfer.getData('dragContent');
? ? ? ? event.target.appendChild(document.getElementById(data))
? ? ? }
??
? ? ? function dragover(event) {
? ? ? ? event.preventDefault();
? ? ? ? /*
? ? ? ? ?* 特別聲明：如果不綁定此事件，drop 事件不會觸發(fā)
? ? ? ? ?*
? ? ? ? ?* 雖然已經設定了元素可被拖動，但是瀏覽器默認地，無法將數據/元素放置到其他元素中。
? ? ? ? ?* 如果有需要設置某些元素可接受被拖動元素，則要阻止它的默認行為，
? ? ? ? ?* 這要通過設置該接收元素的ondragover 事件，調用event.preventDefault() 方法
? ? ? ? */
? ? ? }
? ? </script>
? </head>
? <body>
? <!--給元素加上draggable=true 屬性，使元素可以被拖動-->
? <div id='dragId' draggable='true' ondragstart="dragstart(event)">我是可以拖拽的文字</div>
??
? <div id='dragboxId' class="box" ondrop="drop(event)" ondragover='dragover(event)'></div>
??
??
? </body>
</html>

vuedraggabe使用說明

首先通過yarn add vuedraggable或者npm i -S vuedraggable安裝組件

引入組件并在vue的components 中配置聲明

import draggable from 'vuedraggable'
? ...
? export default {
? ? ? ? components: {
? ? ? ? ? ? draggable,
? ? ? ? },
? ...

直接通過draggable組件作為被動元素的容器，即可實現內部元素的拖拽

<draggable :list="myArray" group="people" @start="drag=true" @end="drag=false">
? ?<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>vue

多個draggable容器之間拖拽，只需要配置draggable組件的props group為同一個組即可

props 屬性之list 就是推拽元素的list

當點擊拖拽元素時，拖拽元素會自動加上一個.sortable-chosen的class類名，可通過這個class設置樣式（比如背景色）

當把拖拽元素拖到其他位置時，拖拽元素會自動加上一個.sortable-ghost的class類名，可通過這個class設置樣式（比如背景色）

draggable組件內還可以加 header slot / footer slot 此時需要在draggable組件上加上draggable=".item"，通過設置可拖拽元素的class，顯示表示組件內部哪些元素可以拖拽

<draggable v-model="myArray" draggable=".item">
? ? <div v-for="element in myArray" :key="element.id" class="item">
? ? ? ? {{element.name}}
? ? </div>
? ? <button slot="footer" @click="addPeople">Add</button>
</draggable>

結尾：以上就是draggable的簡單使用說明，可以滿足基本的拖拽需求，如有錯誤，望大佬不吝指正。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: