draggable拖拽列表设置某一条元素禁止被拖拽

draggable拖拽列表设置某一条元素禁止被拖拽

filter=“.unmover”
:class=“{unmover:index===0}”
表示当前不能被拖拽

 <draggable v-model="imgFile" animation="400" class="clearfix" @update="datadragEnd" filter=".unmover" :move="onMove">
          <div class="leftbox" v-for="(item,index) in imgFile" :key="index" :class="{unmover:index===0}">
              <div class="left">
                   <img :src="item.url" alt="" />
                   <div class="content-wrap">
                      <div class="content">
                        <i class="el-icon-zoom-in" @click.stop="showImg(item.url)"></i>
                        <i class="el-icon-delete" @click.stop="delImg(item,index)"></i>
                      </div>
                   </div>
              </div>
              <p class="img-title">{{index==0?'封面图':'详情图'}}</p>
         </div>
</draggable>

:move=“onMove” 表示不能被停靠,其他元素不可以与当前元素调换位置

onMove (e) {
      //relatedContext: 将停靠的对象,设置为false表示不允许停靠和拖拽
      let evl = e.relatedContext.element.sequence
      if (evl == 1) return false;
      return true
},
`vue-draggable-plus`是一个基于Vue.js框架的组件库,专门用于实现元素拖拽功能。它在处理用户在页面上对元素进行拖动、缩放等操作方面提供了便捷的功能集。 支持滚动条滚动拖拽是`vue-draggable-plus`的一个关键特性。这意味着当用户在一个具有大量内容的页面上尝试移动某个元素时,该元素可以随着滚动条的滚动而继续被拖动。这一特性的实现使得用户可以在滚动长列表或大文本块的情况下更方便地调整布局或选择特定项目。 要利用这个功能,你需要首先安装并引入`vue-draggable-plus`库到你的Vue项目中。接着,在组件模板中添加`<draggable>`标签,并为其绑定相应的属性来配置拖拽行为,包括滚动支持。 例如: ```html <template> <div ref="scrollContainer"> <!-- 其他HTML内容... --> <!-- 开始拖拽区域 --> <div class="draggableArea" draggable="true"> <!-- 您需要拖动的内容... --> </div> <!-- 结束拖拽区域 --> </div> </template> <script> import draggablePlus from 'vue-draggable-plus' export default { components: { draggablePlus }, mounted() { this.$nextTick(() => { // 使用自定义选项启用滚动支持 this.$refs.scrollContainer.addEventListener('wheel', () => { this.draggableInstance?.startDrag(); }); const draggableInstance = this.draggableInstance; if (draggableInstance) { draggableInstance.start(); } }); }, data() { return { draggableInstance: null, }; }, }; </script> ``` 在这个例子中,我们通过给元素添加`draggable="true"`属性开启了拖拽功能。然后,为了支持滚动时的拖拽,我们在滚动事件触发时启动拖拽实例开始拖动过程。这会确保在滚动页面时,用户仍然能准确控制所选元素的位置。 关于`vue-draggable-plus`的更多信息,你可以查阅其官方文档,了解更多高级配置选项及示例应用。了解如何恰当地使用滚动事件监听和其他API来优化用户体验是非常重要的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值