程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

vuedraggable使用filter 后,关联的输入框失效(输入框无法获取焦点)

发布于2021-05-30 12:28     阅读(1920)     评论(0)     点赞(12)     收藏(0)


官方文档传送门

一、什么是draggable,用来干嘛的

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子,使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。


二、draggable 安装

NPM或yarn安装方式

  1. yarn add vuedraggable
  2. npm i -S vuedraggable

UMD浏览器直接引用JS方式

  1. <script src="http://www.itxst.com/package/vue/vue.min.js"></script>
  2. <script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script>
  3. <script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

 

、在vue中使用

在对应的页面引入draggable组件

import draggable from 'vuedraggable'

 

四、简单案例

  1. <template>
  2. <div>
  3. <div>{{drag?'拖拽中':'拖拽停止'}}</div>
  4. <!--使用draggable组件-->
  5. <draggable v-model="myArray" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
  6. <transition-group>
  7. <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
  8. </transition-group>
  9. </draggable>
  10. </div>
  11. </template>
  12. <style scoped>
  13. /*被拖拽对象的样式*/
  14. .item {
  15. padding: 6px;
  16. background-color: #fdfdfd;
  17. border: solid 1px #eee;
  18. margin-bottom: 10px;
  19. cursor: move;
  20. }
  21. /*选中样式*/
  22. .chosen {
  23. border: solid 1px #3089dc !important;
  24. }
  25. </style>
  26. <script>
  27. //导入draggable组件
  28. import draggable from 'vuedraggable'
  29. export default {
  30. //注册draggable组件
  31. components: {
  32. draggable,
  33. },
  34. data() {
  35. return {
  36. drag:false,
  37. //定义要被拖拽对象的数组
  38. myArray:[
  39. {people:'cn',id:10,name:'www.itxst.com'},
  40. {people:'cn',id:20,name:'www.baidu.com'},
  41. {people:'cn',id:30,name:'www.taobao.com'},
  42. {people:'us',id:40,name:'www.yahoo.com'}
  43. ]
  44. };
  45. },
  46. methods: {
  47. //开始拖拽事件
  48. onStart(){
  49. this.drag=true;
  50. },
  51. //拖拽结束事件
  52. onEnd() {
  53. this.drag=false;
  54. },
  55. },
  56. };
  57. </script>

五、使用中遇到的问题

  •   使用 filter 禁止拖拽后,filter禁止标签下的输入框,无法输入

    解决办法: 不使用 filter 禁止,改用 draggable (draggable 参数大概意思就是只能拖拽对应的类选择器)
           
    1. // 大概意思就是标签带 singlePerson class的可以拖动
    2. <draggable
    3. ghostClass="ghost"
    4. draggable=".singlePerson"
    5. :list="list"
    6. group="people"></draggable>
  • 使用 draggable 后,拖动不到想要的位置,只能默认在数组最后

    解决办法:draggable标签 加一个 @end 和 @start 的事件回调,当 start 的时候 在标签加上 singlePerson,当end 的时候在移除
    1. <template>
    2. <draggable
    3. @end="endFn"
    4. style="width: 100%; min-height: 80vh;background: #f00"
    5. ghostClass="ghost"
    6. @end="endFn"
    7. @start="startFn"
    8. draggable=".singlePerson"
    9. :list="organizeDataV2"
    10. group="people">
    11. <div :class="{'singlePerson': modularStart}">
    12. </div>
    13. </draggable>
    14. </template>
    15. <script>
    16. export default {
    17. data () {
    18. return {
    19. modularStart: false
    20. }
    21. },
    22. methods: {
    23. endFn () {
    24. this.modularStart = false
    25. },
    26. startFn () {
    27. this.modularStart = true
    28. }
    29. }
    30. }
    31. </script>

     

 

  • 修改 draggable 拖拽效果

    解决办法: 使用参数 ghostClass 绑定一个 class,如果在自己在写 class 做出改变
    1. <template>
    2. <draggable
    3. ghostClass="ghost"
    4. :list="list"
    5. group="people"></draggable>
    6. </template>
    7. <style scoped lang="less" rel="stylesheet/less">
    8. .ghost {
    9. width: 100%;
    10. height: 70px;
    11. text-align: center;
    12. background-color: #00f;
    13. background-repeat: no-repeat;
    14. background-size: cover;
    15. color: transparent;
    16. }
    17. .ghost::after {
    18. content: '可将模块放置到此区域';
    19. color: #3089dc;
    20. margin-top: 15px;
    21. position: relative;
    22. top: -20px;
    23. height: 40px;
    24. line-height: 40px;
    25. -webkit-box-sizing: border-box;
    26. box-sizing: border-box;
    27. padding: 0 20px;
    28. background: #e4f0fd;
    29. display: inline-block;
    30. }
    31. </style>
     
    • 使用clone拷贝,拷贝了多个同一个对象,修改其中一个对象,其他拷贝的对象内容也会跟着改变

      解决办法: 因为 clone的拷贝是浅拷贝,所以会出现这种情况,所以推荐不使用 draggable 绑定的 list 作为拖拽完成数组

      推荐使用方法:  draggable 绑定一个 edn(鼠标发下) 回调,回调中有返回 oldIndex(对象在拖动的下标) newIndex (对象在拖动完成,在新数组的下标)
       
      1. <template>
      2. <draggable
      3. @end="endFn"
      4. ghostClass="ghost"
      5. :list="list"
      6. group="people"></draggable>
      7. </template>
      8. methods: {
      9. endFn (e) {
      10. const oldIndex = e.oldIndex
      11. const newIndex = e.newIndex
      12. }
      13. }


       

 

原文链接:https://blog.csdn.net/weixin_41854372/article/details/117291573




所属网站分类: 技术文章 > 博客

作者:小兔崽子

链接:http://www.qianduanheidong.com/blog/article/116017/12d0ced358ea6350a908/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容:(最多支持255个字符)