Vue拖拽插件（vuedraggable）

参考文档： vue.draggable disabled 开启和禁用拖动 - itxst.com

效果如下图：

① 安装插件：yarn add vuedraggable

②引入插件并使用：

<template><div class="draggable"><draggablev-model="dragData"group="player"animation="500"delay="0":disabled="false"ghostClass="ghost"chosenClass="chosen"forceFallback@start="onStart"@end="onEnd":move="onMove"><div class="u-player" v-for="(data, index) in dragData" :key="index">{{ data.name || '--'}} : {{ data.num }}</div></draggable></div>
</template>
<script>
import draggable from 'vuedraggable'
export default {name: 'Draggable',components: {draggable},data () {return {dragData: [{name: 'curry',num: 30},{name: 'klay',num: 11},{name: 'kobe',num: 24},{name: 'james',num: 23},      {name: 'leo',num: 36}]}},methods: {onStart (e) { // 开始拖动时触发的事件console.log('start:', e)console.log('拖拽操作前的索引oldIndex:', e.oldIndex)console.log('拖拽完成后的索引newIndex:', e.newIndex)},onEnd (e) { // 拖动完成时触发的事件console.log('end:', e)console.log('拖拽操作前的索引oldIndex:', e.oldIndex)console.log('拖拽完成后的索引newIndex:', e.newIndex)},onMove (e, originalEvent) { // 拖拽move事件回调console.log('move:', e)console.log('originalEvent:', originalEvent)// 不允许拖拽if (e.draggedContext.element.num === 11) return false // false表示阻止，true表示不阻止return true;}}
}
</script>
<style lang="less" scoped>
.draggable {width: 1200px;height: 100vh;margin: 0 auto;.u-player {margin-top: 30px;display: inline-block;color: #0079DD;background: #F0F7FD;font-size: 16px;font-weight: 500;padding: 8px 18px;border-radius: 6px;text-align: center;cursor: move;&:not(:last-child) {margin-right: 16px;}}
}
.chosen { // 选择元素的样式background: #666 !important;color: #fff !important;
}
.ghost { // 目标位置占位符的样式及需要停靠位置的样式background: #1890FF !important;
}
</style>

Vue拖拽插件（vuedraggable）相关推荐

Vue3使用拖拽插件 - vuedraggable
1. 安装 pnpm i -S vuedraggable@next 2. 导入 import draggable from "vuedraggable"; 3. 基本使用 < ...
vue3TS+Jsplumb+vuedraggable拖拽插件使用记录
安装拖拽插件 vue3需下载-@next此版本,否则会出现错误 npm i -S vuedraggable@next npm install sortablejs --save //拖拽组件依赖sor ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
vue 拖拽产生连线_dragUI
dragUI 文档目录用于UNI可拖拽可视化编程在线演示 demo地址一个简单创建hello world 界面的视频,github不会放视频,放在bilibli了 dragUI 演示视频效果图 ...
vue拖拽实现app或小程序装修界面
vue拖拽实现app或小程序装修一.最终效果图参考引用作者:作者:李白不吃茶v 原作者源代码git地址:大神的源代码这里是引用二.需要安装的依赖安装:vuedraggable 语法:npm ...
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
自己封装的vue拖拽组件
自己封装的vue拖拽组件使用Vue.Draggable实现 Vue.Draggable的基础使用方法可以看看这个哥们的https://blog.csdn.net/zjiang1994/article ...
vue拖拽排序组件
vue拖拽排序组件 npm install vuedraggable -S vue.draggable中文文档组件代码 <template><div><div cla ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...

Vue拖拽插件（vuedraggable）

Vue拖拽插件（vuedraggable）相关推荐

最新文章

热门文章