前言
創(chuàng)新互聯建站堅持“要么做到,要么別承諾”的工作理念,服務領域包括:成都網站設計、成都做網站、企業(yè)官網、英文網站、手機端網站、網站推廣等服務,滿足客戶于互聯網時代的西湖網站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴!
pc端開發(fā)需要拖拽組件完成列表的順序交換,一般移動端的UI組件會包含,但是我在用的iview并沒有此功能的組件,于是手寫一個,實現起來很簡單。效果圖如下:
可以拖拽完成新排序,點擊某一項可以觸發(fā)相關事件.
關于拖拽 drag & drop
拖放(Drag 和 drop)是 HTML5 標準的組成部分。
拖拽對象
dataTransfer對象,只能在拖放事件的事件處理程序中訪問。重要屬性:
拖拽屬性
draggable 屬性規(guī)定元素是否可拖動。
拖拽事件
源碼:
<template> <div class="transition-container"> <div class="item" v-for="(item, index) in items" :key="index" draggable="true" @dragstart="handleDragStart($event, item)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)" @click="chooseNav(item)" > <p class="trans-btn"> <span v-if="item.problemId"> <b class="id"> {{item.problemId}} </b> {{item.key}} </span> <span v-else> {{item.key}} </span> <span> <i-button v-if="btn" size="small" type="error" @click="deleteItem(item, index)">刪除</i-button> </span> </p> </div> </div> </template> <script> import './index.less'; export default { name: 'transition', props: { dataSource: Array, btn: Boolean, }, data() { return { items: [], dragging: null, }; }, watch: { dataSource(val) { this.items = val; }, dragging(val) { if (this.dataSource.includes(val)) { this.dragging = val; } else { this.dragging = null; } }, }, methods: { handleDragStart(e, item) { this.dragging = item; }, handleDragEnd() { this.dragging = null; this.$emit('hasChanged', this.items); }, // 首先把div變成可以放置的元素,即重寫dragenter/dragover handleDragOver(e) { e.dataTransfer.dropEffect = 'move';// e.dataTransfer.dropEffect="move";//在dragenter中針對放置目標來設置! }, handleDragEnter(e, item) { if (this.dragging) { e.dataTransfer.effectAllowed = 'move';// 為需要移動的元素設置dragstart事件 if (item === this.dragging) { return; } const newItems = [...this.items]; console.log(newItems); const src = newItems.indexOf(this.dragging); const dst = newItems.indexOf(item); newItems.splice(dst, 0, ...newItems.splice(src, 1)); this.items = newItems; } }, chooseNav(val) { this.$emit('selectItem', val); }, deleteItem(item, index) { this.$emit('deleteItem', item, index); }, editor(item, index) { this.$emit('editorItem', item, index); }, }, }; </script>
基本功能就完成啦
參考文章
W3school——HTML 5 拖放
div拖拽互換位置(vue)
如果簡單的功能不能滿足,推薦這個寫好的輪子
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯。
標題名稱:vue拖拽組件使用方法詳解
網站URL:http://bm7419.com/article42/goecec.html
成都網站建設公司_創(chuàng)新互聯,為您提供網站收錄、品牌網站建設、微信小程序、移動網站建設、全網營銷推廣、網站改版
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯