一胎五宝,非主流最新个性签名,焚烧古树携种者
前言
pc端开发需要拖拽组件完成列表的顺序交换,一般移动端的ui组件会包含,但是我在用的iview并没有此功能的组件,于是手写一个,实现起来很简单。效果图如下:
可以拖拽完成新排序,点击某一项可以触发相关事件.
关于拖拽 drag & drop
拖放(drag 和 drop)是 html5 标准的组成部分。
拖拽对象
datatransfer对象,只能在拖放事件的事件处理程序中访问。重要属性:
拖拽属性
draggable 属性规定元素是否可拖动。
拖拽事件
源码:
<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" style="margin-right: 10px;" @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>
基本功能就完成啦
参考文章
如果简单的功能不能满足,推荐这个写好的轮子
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论