Vue2拖拽插件(vuedraggable)

简介: 这篇文章介绍了如何在Vue 3框架中使用`vuedraggable`插件来实现拖拽功能,并提供了插件的安装、配置和事件处理的示例。

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

效果如下图:

① 安装插件:yarn add vuedraggable

②引入插件并使用:

<template>
  <div class="draggable">
    <draggable
      v-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>
AI 代码解读
目录
打赏
0
1
1
0
23
分享
相关文章
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
400 0
|
11月前
|
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
3021 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
11月前
|
Vue2无操作半小时后自动清除登录状态
这篇文章介绍了如何在Vue应用中实现当用户半小时无操作后自动清除登录状态的功能,通过监听鼠标、键盘或滚动事件来重置过期时间。
222 1
Vue2无操作半小时后自动清除登录状态
一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序
一个简单的Vue2例子讲明白拖拽drag、移入dragover、放下drop的触发机制先后顺序
【Vue 3】如何实现动态表单生成器的拖拽功能?
【Vue 3】如何实现动态表单生成器的拖拽功能?
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
462 1
|
11月前
Vue3拖拽插件(vuedraggable@next)
vuedraggable 是一款 Vue2 拖拽插件,可轻松实现列表项的拖拽排序与交互。通过简单配置,即可在不同区域间拖动元素并实现数据同步。支持多种事件监听和自定义样式。
1045 2
Vue3拖拽插件(vuedraggable@next)
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
6862 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
ThreeJs控制模型骨骼实现数字人
这篇文章讲解了如何使用Three.js通过控制模型的骨骼来实现数字人的动态表现,包括加载模型、获取骨骼信息以及通过编程控制骨骼动作的具体方法。
988 1
Vue2瀑布流图片展示(Waterfall)
这篇文章介绍了如何在Vue 3框架中实现瀑布流图片展示组件,提供了两种实现方式:一种使用CSS的`column-count`和`column-gap`属性,另一种使用JavaScript计算图片位置,以实现图片在多列中的动态分布。
583 2
Vue2瀑布流图片展示(Waterfall)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等