vue PC端拖拽Drag事件

本文介绍了一个使用Vue.js实现的拖拽交换成员信息的组件案例。该组件允许在不同的团队间通过拖拽操作来交换成员的位置,并详细展示了如何通过监听dragstart、dragend、drop和dragover事件来实现这一功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <div class="team" v-for="(team,tindex) in teamDataArr" :key="tindex">
        <div class="member" v-for="(item,cindex) in team.children" :key="cindex" :data-id="tindex+'-'+cindex" draggable="true" @dragstart="onDragstart($event)" @dragend="onDragend($event)" @dragover="onDragover($event)" @drop="onDrop($event)">
          <div>{{item.id}}</div>
          <div>{{item.name}}</div>
          <div>{{item.mobile}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello World',
      startExchangeIndex: '',
      endExchangeIndex: '',
      teamDataArr: [
        {
          teamName: 'A队',
          children: [
            {
              id: 1,
              name: 'aaa',
              mobile: '18662245790'
            },
            {
              id: 2,
              name: 'bbb',
              mobile: '18662245791'
            },
            {
              id: 3,
              name: 'ccc',
              mobile: '18662245792'
            },
            {
              id: 4,
              name: 'ddd',
              mobile: '18662245793'
            },
            {
              id: 5,
              name: 'eee',
              mobile: '18662245794'
            }
          ]
        },
        {
          teamName: 'B队',
          children: [
            {
              id: 6,
              name: 'fff',
              mobile: '18662245795'
            },
            {
              id: 7,
              name: 'ggg',
              mobile: '18662245796'
            },
            {
              id: 8,
              name: 'hhh',
              mobile: '18662245797'
            },
            {
              id: 9,
              name: 'iii',
              mobile: '18662245798'
            },
            {
              id: 10,
              name: 'jjj',
              mobile: '18662245799'
            }
          ]
        },
        {
          teamName: 'C队',
          children: [
            {
              id: 11,
              name: 'kkk',
              mobile: '18662245780'
            },
            {
              id: 12,
              name: 'lll',
              mobile: '18662245781'
            },
            {
              id: 13,
              name: 'mmm',
              mobile: '18662245782'
            },
            {
              id: 14,
              name: 'nnn',
              mobile: '18662245783'
            },
            {
              id: 15,
              name: 'ooo',
              mobile: '18662245784'
            }
          ]
        }
      ]
    }
  },
  methods: {
    onDragstart (event) {
      // event.target 都返回源元素
      console.log(event.target)
      this.startExchangeIndex = event.target.getAttribute('data-id') || event.target.parentNode.getAttribute('data-id')
      console.log('拖拽开始', this.startExchangeIndex)
    },
    onDragend (event) {
      // event.target 都返回源元素
      console.log('下标' + this.startExchangeIndex + ' 和 ' + this.endExchangeIndex + '进行替换')
      
      let startTeamIndex = parseInt(this.startExchangeIndex.split('-')[0])
      let startMemberIndex = parseInt(this.startExchangeIndex.split('-')[1])
      let endTeamIndex = parseInt(this.endExchangeIndex.split('-')[0])
      let endMemberIndex = parseInt(this.endExchangeIndex.split('-')[1])

      let _id = this.teamDataArr[endTeamIndex].children[endMemberIndex].id
      let _name = this.teamDataArr[endTeamIndex].children[endMemberIndex].name
      let _mobile = this.teamDataArr[endTeamIndex].children[endMemberIndex].mobile

      this.teamDataArr[endTeamIndex].children[endMemberIndex].id = this.teamDataArr[startTeamIndex].children[startMemberIndex].id
      this.teamDataArr[endTeamIndex].children[endMemberIndex].name = this.teamDataArr[startTeamIndex].children[startMemberIndex].name
      this.teamDataArr[endTeamIndex].children[endMemberIndex].mobile = this.teamDataArr[startTeamIndex].children[startMemberIndex].mobile

      this.teamDataArr[startTeamIndex].children[startMemberIndex].id = _id
      this.teamDataArr[startTeamIndex].children[startMemberIndex].name = _name
      this.teamDataArr[startTeamIndex].children[startMemberIndex].mobile = _mobile
      console.log('拖拽结束')
    },
    onDrop (event) {
      // event.target 都返回目标元素
    //   if (event.target.className === 'member') {
        this.endExchangeIndex = event.target.getAttribute('data-id') || event.target.parentNode.getAttribute('data-id')
        console.log(this.endExchangeIndex, 33434)
    //   } else {
    //     this.endExchangeIndex = event.target.parentElement.getAttribute('data-id')
    //   }
    },
    onDragover (event) {
      // 阻止元素的默认行为,不然ondrop不管用
      event.preventDefault()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.team {
  float: left;
  border: 1px solid black;
  margin-right: 20px;
}
.member {
  overflow: hidden;
  padding-left: 20px;
}
.member > div {
  float: left;
  margin:2px 5px;
  border: 1px solid #eee;
  padding: 5px
}
</style>
 

### 如何在PC创建可拖动的浮动按钮 #### 创建基础组件结构 为了构建一个可以被拖动的悬浮按钮,首先需要定义基本HTML模板以及引入必要的Vue.js组件。 ```html <template> <div> <float-button ref="floatButton" :name="buttonName" @mousedown="startDrag"/> </div> </template> <script> import FloatButton from './chart/FloatButton' export default { name: 'Index', components: { FloatButton }, data() { return { buttonName: "Floating Button", position: { top: 0, left: 0 } }; }, } </script> ``` 上述代码展示了如何设置`float-button`组件并为其绑定事件处理器来响应鼠标的按下操作[^1]。 #### 添加CSS样式使按钮浮起 为了让按钮看起来像是漂浮于其他内容之上,需应用特定的CSS属性: ```css <style scoped> .float-button { position: fixed; z-index: 999; /* Other styles */ } </style> ``` 此部分通过设定position为fixed确保即使页面滚动也能保持固定位置,并利用z-index让其始终位于最上层显示[^3]。 #### JavaScript逻辑处理拖拽行为 接下来,在JavaScript中加入用于追踪鼠标移动和释放动作的功能。这允许用户点击并拖曳按钮到新的位置。 ```javascript methods: { startDrag(event){ const dragElement = event.target.closest('.float-button'); let offsetX = event.clientX - parseInt(dragElement.style.left || 0); let offsetY = event.clientY - parseInt(dragElement.style.top || 0); document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', stopDrag); function onMove(e) { e.preventDefault(); // Update the element's position based on mouse movement. dragElement.style.left = `${e.clientX - offsetX}px`; dragElement.style.top = `${e.clientY - offsetY}px`; this.position.top = e.clientY - offsetY; this.position.left = e.clientX - offsetX; Object.assign(this.$data, this.position); } function stopDrag(){ document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', stopDrag); } } }, mounted(){ window.onresize = () => { const floatBtn = this.$refs['floatButton'].$el; if (window.innerWidth <= parseFloat(floatBtn.style.left)) { floatBtn.style.left = `${window.innerWidth - 50}px`; // Adjust as necessary } if (window.innerHeight <= parseFloat(floatBtn.style.top)) { floatBtn.style.top = `${window.innerHeight - 50}px`; // Adjust as necessary } } } ``` 这段脚本实现了当用户按住按钮时启动拖拽过程,并持续更新按钮的位置直到松开鼠标键为止;同时也考虑到了窗口大小变化的情况,防止按钮超出屏幕边界[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值