el-button可拖拽如何实现

放心摆

已于 2022-12-14 17:19:59 修改

阅读量594

点赞数

文章标签： vue.js 前端 javascript

于 2022-12-14 17:17:03 首次发布

本文链接：https://blog.csdn.net/m0_66879933/article/details/128318830

版权

首先我们看一下效果

动画1

首先，我们要被div包裹的el-button，为什么要加这个div呢，因为我们用到了html的

@dragstart="dragstart($event)" @dragend="dragend($event)" 这两个事件，而这两个事件写在el-button组件中是无法识别的，而 draggable="true" 这是html的一个属性为trun时可拖拽但无法移动，为了计算拖拽位置要给父元素加一个ref="back_box"下面我们看看如何实现拖拽后移动元素

<div ref="back_box">
<div @dragstart="dragstart($event)" @dragend="dragend($event)"  class="p"  draggable="true"  :style="`left:${elLeft}px;top:${elTop}px`"> 
  <el-button  type=" primary"   style="left: 95%;font-size: 40px;position:absolute" icon="el-icon-edit-outline" circle  @click="goto()"></el-button>
</div>
</div>

在date中我们定义几个计算位置的字段

export default {
 
    data(){
        return{
          initWidth: 0, // 父元素的宽-自适应值
      initHeight: 0, // 父元素的高-自适应值
      startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
      startclientY: 0, //元素拖拽前距离浏览器的Y轴位置
      elLeft: 1150, // 元素的左偏移量（也是按钮未拖拽之前的位置）
      elTop: 50, // 元素的上偏移量（也是按钮未拖拽之前的位置）
        
        
        }
   
    },}

下面是上面提到两种事件的js代码，页面初始化拿到按钮的起始位置，拖拽时会触发另外两个事件


mounted() {
    // console.log(this.$el);
    this.initBodySize();
  },

    methods:{
      // 页面初始化
    initBodySize() {
      this.initWidth = this.$refs.back_box.clientWidth; // 拿到父元素宽
      // this.initHeight = this.initWidth * (1080 / 1920);
      this.initHeight = this.initWidth * ((1080 * 0.88) / (1920 - 1080 * 0.02)); // 根据宽计算高实现自适应
    },
      dragstart(e) {
      console.log(e);
      this.startclientX = e.clientX; // 记录拖拽元素初始位置
      this.startclientY = e.clientY;
    },
    // 拖拽完成事件
    dragend(e) {
      console.log(e);
      let x = e.clientX - this.startclientX; // 计算偏移量
      let y = e.clientY - this.startclientY;
      this.elLeft += x; // 实现拖拽元素随偏移量移动
      this.elTop += y;
    },
}