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

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

一、功能背景描述：

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

二、代码实现：

2.1：下载插件

中文文档：

vue.draggable中文文档 - itxst.com https://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)" />
            </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>

有问题指正下哈谢谢！

jQuery-UI为我们提供了一个非常便捷的拖拽方法： draggable ()，在使用此方法时，我们可能会希望控件只在某一区域中移动，不能被拖出边界，这样的话我们可以使用下面的方法：调用 draggable ()时： $('#element'). draggable ({containment: '#background'}); 上述代码是将element的拖拽范围限制在backg...

今天分享一个 vue 项目中在不同列表拖拽设置选项的功能，这个功能也是在做项目中遇到的，先说下这个功能的要点(参考下图)，有2个列表，左侧列表展示已选，右侧列表展示未选，通过拖拽进行设置，已选的选项不能超过4个，超过的话自动将拖拽之前的最后一项清除到右侧，且如果从已选往未选里拖的时候，右侧显示垃圾桶的提示(如图)。拖拽功能图片：垃圾桶显示图：首先讲讲 vue - draggable 的使用安装 vue - draggable : npm install vue draggable 在使用插件的组件内引入 vue - draggable 并注册组件: import draggable from " vue dra

v-model 绑定数据数组可获取排序之后的最新数组 tag 指定 vue draggable 渲染之后的标签类型，默认div group 组名--相同组名之间可拖拽。可传obj格式企业微信-新版WECOM-JSSDK-分享消息到当前会话-sendChatMessage-（fail_no permission与errMsg: “sendChatMessage:no permis）企业微信-新版WECOM-JSSDK-分享消息到当前会话-sendChatMessage-（fail_no permission与errMsg: “sendChatMessage:no permis） m0_67927735: {errMsg: "sendChatMessage:fail, the permission value is offline verifying", errCode: -1}一样的说没有权限，你的最后图片我在我的后台没有找到，具体要怎么设置呢？企业微信-新版WECOM-JSSDK-分享消息到当前会话-sendChatMessage-（fail_no permission与errMsg: “sendChatMessage:no permis） m0_59799452: 能实现文本混合图片一起放到输入框里吗？企业微信-新版WECOM-JSSDK-分享消息到当前会话-sendChatMessage-（fail_no permission与errMsg: “sendChatMessage:no permis） Rlm*: 我想禁止分享也不能用== 企业微信-新版WECOM-JSSDK-分享消息到当前会话-sendChatMessage-（fail_no permission与errMsg: “sendChatMessage:no permis） Rlm*: ww.register({ debug: true, corpId: corpid, // 必填，当前用户企业所属企业ID jsApiList: [ 'getExternalContact', 'hideMenuItems'], // 必填，需要使用的JSAPI列表 getConfigSignature // 必填，根据url生成企业签名的回调函数 async function getConfigSignature(url) { // 根据 url 生成企业签名 return { timestamp, nonceStr, signature ww.hideMenuItems({ menuList: [ "menuItem:share:appMessage", "menuItem:share:wechat", "menuItem:share:email", "menuItem:favorite", "menuItem:share:timeline", "menuItem:openWithQQBrowser", "menuItem:openWithSafari", 这样写禁止企微分享怎么无效啊企业微信-新版WECOM-JSSDK-分享消息到当前会话-sendChatMessage-（fail_no permission与errMsg: “sendChatMessage:no permis） cococodemaster: 两个认证的signature 用的是同一个吗