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

目录

一、功能背景描述：

二、代码实现：

2.1：下载插件

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

2.3：使用

---

一、功能背景描述：

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

二、代码实现：

2.1：下载插件

中文文档 ：

vue.draggable中文文档 - itxst.comhttps://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>

有问题指正下哈谢谢！