耀极客论坛

 找回密码
 立即注册
查看: 571|回复: 0

vue拖拽添加的简单实现

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-7 01:42:13 | 显示全部楼层 |阅读模式
  本文主要介绍了vue拖拽添加的简单实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  本文主要介绍了vue拖拽添加的简单实现,具体如下:
  效果图
  并没有判断是否重复,没有删除旧数据

  数据体
  1. ‹MyShuttle :dataOrigin='[
  2.           {
  3.             Name:"数据001",
  4.             Id:"数001",
  5.           },
  6.           {
  7.             Name:"数据002",
  8.             Id:"数001",
  9.           },
  10.           {
  11.             Name:"数据003",
  12.             Id:"数001",
  13.           }]'
  14.          
  15.       :space='[{
  16.             Name:"右001",
  17.             Id:"右001",
  18.             }]' />
复制代码
  代码
  draggable开启可拖动
  1. @dragenter.prevent @dragover.prevent
  2. // 阻止浏览器默认行为,不然会显示一个叉叉,不好看
复制代码
  阻止默认行为
  1. @dragleave.stop=“dragleave($event, ‘main')”
复制代码
  进入离开当前元素都会触发
  1. @dragend.stop=“dragEnd($event, item)”
复制代码
  放下拖拽内容触发
拖拽事件和属性

  标记 这个很重要!!! 这个决定了拖拽事件的行为。当点击开始拖拽之后,鼠标点击所在的位置就是标记。
dragstart:当单击下鼠标,并移动之后执行。
drag:在dragstart执行之后,鼠标在移动时连续触发。
dragend:当拖拽行为结束,也就是松开鼠标的时候触发。
dragenter:当正在拖拽的元素的标记进入某个Dom元素时触发,自身首先会触发。被进入的Dom元素会触发这个事件。
dragover:当拖拽的元素的标记在进入的Dom元素上移动时触发,在自身移动时也会触发。
dragleave:当拖拽的元素在离开进入的Dom时触发。
  H5拖拽属性 draggable
  draggable:当需要某个元素可以拖拽时,需设置为true,默认为false。选中的文本、图片、链接默认可以拖拽。
DataTransfer对象:该属性用于保存拖放的数据和交互信息,该组件没有使用到,暂忽略。
  当鼠标移动到目标div盒子才会追加,简单的才最能说明问题
  1. ‹template>
  2.   ‹div class="MyShuttle">
  3.     ‹div class="MyShuttleLeft">
  4.       ‹div class="title">数据源‹/div>
  5.       ‹div class="dataBox" @dragleave.stop="dragleave($event, 'main')">
  6.         ‹div v-for="(item, i) in dataOrigin" :key="i" class="dataList" draggable @dragenter.prevent
  7.           @dragover.prevent @dragstart.stop="dragstart($event, item)"
  8.           @dragend.stop="dragEnd($event, item)">
  9.           {{ item.Name}}
  10.         ‹/div>
  11.       ‹/div>
  12.     ‹/div>
  13.     ‹div class="MyShuttleCenter">‹/div>
  14.     ‹div class="MyShuttleRight">
  15.       ‹div class="title">数据源‹/div>
  16.       ‹div ref="MyShuttleRight" class="dataBox">
  17.         ‹div v-for="(item, i) in spaceList" :key="i" class="dataList" draggable @dragenter.prevent
  18.           @dragover.prevent>
  19.           {{ item.Name}}
  20.         ‹/div>
  21.       ‹/div>
  22.     ‹/div>
  23.   ‹/div>
  24. ‹/template>
  25. ‹script>
  26. export default {
  27.   name: '',
  28.   components: {},
  29.   props: {
  30.     dataOrigin: {
  31.       type: Array
  32.     },
  33.     space: {
  34.       type: Array
  35.     }
  36.   },
  37.   data() {
  38.     return {
  39.       spaceList: this.space,
  40.       isDragStatus: false
  41.     }
  42.   },
  43.   computed: {},
  44.   watch: {},
  45.   created() { },
  46.   mounted() { },
  47.   methods: {
  48.     dragleave(e, item) {
  49.       // console.log(e, item)
  50.       if (item === 'main') {
  51.         this.isDragStatus = true
  52.       } else {
  53.         this.isDragStatus = false
  54.       }
  55.       // console.log(this.isDragStatus)
  56.     },
  57.     dragstart(e, item) {
  58.       // console.log(e, item)
  59.     },
  60.     dragEnd(e, item) {
  61.       const top = this.$refs.MyShuttleRight.getBoundingClientRect().top
  62.       const right = this.$refs.MyShuttleRight.getBoundingClientRect().right
  63.       const bottom = this.$refs.MyShuttleRight.getBoundingClientRect().bottom
  64.       const left = this.$refs.MyShuttleRight.getBoundingClientRect().left
  65.       console.log(top, right, bottom, left)
  66.       console.log(e.clientX, e.clientY, item)
  67.       if (this.isDragStatus && e.clientY > top && e.clientY ‹ bottom && e.clientX > left && e.clientX ‹ right) {
  68.         this.spaceList.push(item)
  69.         console.log(this.spaceList.indexOf(item))
  70.       }
  71.     }
  72.   }
  73. }
  74. ‹/script>
  75. ‹style scoped lang="scss">
  76. .MyShuttle {
  77.   width: 100%;
  78.   height: 308px;
  79.   display: flex;
  80.   justify-content: space-between;
  81.   // 左右盒子公共样式
  82.   .MyShuttleLeft,
  83.   .MyShuttleRight {
  84.     border: 1px solid #dddddd;
  85.     border-collapse: collapse;
  86.     .title {
  87.       box-sizing: border-box;
  88.       width: 100%;
  89.       height: 40px;
  90.       background: #f5f5f5;
  91.       border-radius: 4px 4px 0px 0px;
  92.       border-bottom: 1px solid #dddddd;
  93.       padding: 10px 16px;
  94.       font-size: 14px;
  95.       font-family: PingFangSC-Regular, PingFang SC;
  96.       font-weight: 400;
  97.       color: #333333;
  98.       line-height: 20px;
  99.     }
  100.     .dataBox {
  101.       width: 100%;
  102.       height: 228px;
  103.       overflow: auto;
  104.       padding: 6px 0;
  105.       .dataList {
  106.         width: 96%;
  107.         height: 40px;
  108.         box-sizing: border-box;
  109.         font-size: 14px;
  110.         font-family: PingFangSC-Regular, PingFang SC;
  111.         font-weight: 400;
  112.         color: #666;
  113.         line-height: 20px;
  114.         margin: 0 2% 10px;
  115.         padding: 10px 16px;
  116.         border: 1px solid #ddd;
  117.         border-radius: 4px;
  118.         user-select: none;
  119.         cursor: pointer;
  120.         &:hover {
  121.           color: #01bc77;
  122.           background: rgba(1, 188, 119, 0.1);
  123.         }
  124.       }
  125.     }
  126.   }
  127.   .MyShuttleLeft {
  128.     width: 362px;
  129.     height: 100%;
  130.     background: #ffffff;
  131.     border-radius: 4px;
  132.   }
  133.   .MyShuttleCenter {
  134.     width: 64px;
  135.     height: 100%;
  136.   }
  137.   .MyShuttleRight {
  138.     width: 362px;
  139.     height: 100%;
  140.     background: #ffffff;
  141.     border-radius: 4px;
  142.   }
  143. }
  144. ‹/style>
复制代码
  到此这篇关于vue拖拽添加的简单实现的文章就介绍到这了,更多相关vue拖拽添加内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:18 , Processed in 0.072541 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表