首页 前端知识 vue中vuedraggable拖拽插件使用,指定范围拖拽。

vue中vuedraggable拖拽插件使用,指定范围拖拽。

2024-07-30 22:07:24 前端知识 前端哥 136 3 我要收藏

目录

一、功能背景描述:

二、代码实现:

2.1:下载插件

2.2:按需页面引入并注册插件

2.3:使用


一、功能背景描述:

在后台管理系统中,需求添加某些配置选项,并且选项可以拖拽调整顺序,指定按钮图标允许拖拽,不是整行拖拽。最终将配置的选项传给后端保存。功能如下图展示:

二、代码实现:
2.1:下载插件

中文文档 :

vue.draggable中文文档 - itxst.comicon-default.png?t=N7T8https://www.itxst.com/vue-draggable/tutorial.html

npm i vuedraggable
2.2:按需页面引入并注册插件
<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
}
</script>
2.3:使用
<draggable v-if="item.radioType !== 3" v-model="item.options" :disabled="allowDrag">
              <div v-for="(childItem, childIndex) in item.options" :key="childIndex" style="display: flex;margin-bottom: 20px;">
                <img  @mouseenter="startLongPress" @mouseleave="endLongPress" class="drag_icon mr10" style="cursor: move;" src="@/assets/ReturnVisit/drag.png" alt="拖动图标">
                <span style="width: 8%;">选项{{ childIndex+1 }}:</span>
                <el-input v-model="childItem.cname" placeholder="请输入选项" clearable maxlength="100" show-word-limit type="textarea" autosize resize="none" />
                <el-button type="primary" icon="el-icon-plus" circle class="ml20" @click.stop="handleAdd(childItem.cname,index)" />
                <el-button v-if="item.options.length > 1" type="danger" icon="el-icon-delete" circle @click.stop="handleReduce(childIndex,index)" />
              </div>
            </draggable>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'ProblemItem',
  components: { draggable },
  props: {
    questionList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tageType: ['', 'warning', 'success'],
      allowDrag: false, // 控制是否允许拖拽
      longPressTimer: null, // 长按计时器  
      longPressThreshold: 300, // 长按阈值
    }
  },
  computed: {
    question_list: {
      get() {
        return this.questionList
      },
      set(value) {
        this.$emit('update:questionList', value)
        return value
      }
    }
  },
  mounted() {

  },
  methods: {
    startLongPress() {  
      clearTimeout(this.longPressTimer);  
      this.longPressTimer = setTimeout(() => {  
        //鼠标移入后的逻辑  
        console.log('鼠标移入');
        this.allowDrag = false  
        // 可以在这里触发一个事件或者执行其他操作  
      }, 300);  
    },  
    endLongPress() {  
      clearTimeout(this.longPressTimer);  
      // 在这里可以添加松开鼠标后的逻辑(如果需要)  
      console.log('鼠标松开');  
      this.allowDrag = true  
    },  
  }
}
</script>

有问题指正下哈谢谢!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14654.html
标签
评论
发布的文章

AE、Lottie、JSON简单介绍

2024-08-12 10:08:42

VSCode配置settings.json

2024-08-12 10:08:42

JSON 格式说明

2024-08-12 10:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!