30行代码实现拖动组件[拿来即用]

Posted 2021-08-21 前端呆头鹅

文章目录

• • 一 HTML-模板准备
  • • 1.1 源码
    • 1.2 解析
  • 二 JS-代码准备
  • 三 CSS-样式准备
  • 四 使用示例

一 html-模板准备

1.1 源码

<template>
    <article 
    class="rk-mobile-drag" 
    draggable="true"
    @dragstart="dragstart"
    @dragend="drop"
    :style="position"
    >
		<slot></slot>
    </article>
</template>

1.2 解析

代码	解析
<article>	h5语义化标签，视作div即可
:style=“position”	位置绑定变量 方便改变
draggable=“true”	将元素设置为允许拖动
@dragstart=“dragstart”	绑定开始拖动事件 事件核心为记录鼠标初始位置
@dragend=“drop”	绑定结束拖动事件 事件核心为对比鼠标移动位置 为元素赋值新位置

二 JS-代码准备

定义所需变量和两个事件。

dragstart： 开始拖动事件 事件核心为记录鼠标初始位置。

drop： 结束拖动事件 事件核心为对比鼠标移动位置 为元素赋值新位置。

<script>
export default {
    data(){
        return {
            position: {
                top: '0px',
                left: '0px',
            },
            beforeX: '',
            beforeY: ''
        }  
    },
    methods: {
       // 开始拖动事件 事件核心为记录鼠标初始位置
       dragstart(event) {
           // 记录鼠标移动前位置
           this.beforeX = event.clientX;
           this.beforeY = event.clientY;
       },
       //  结束拖动事件 事件核心为对比鼠标移动位置 为元素赋值新位置
       drop(event) {
		   // 记录鼠标移动后位置
           var afterX = event.clientX;
           var afterY = event.clientY;
           // 计算鼠标移动位置
           var nx = afterX - this.beforeX; 
           var ny = afterY - this.beforeY; 
           // 移动元素位置
           this.position.top = parseInt(this.position.top) + ny + 'px';
           this.position.left = parseInt(this.position.left) + nx + 'px';
       }
   }
}
</script>

三 CSS-样式准备

样式除了position，其他随意即可。

<style scoped>
    .rk-mobile-drag{
        background-color: chartreuse;
        width: 100px;
        height: 300px;
        position: fixed;
    }
</style>

四 使用示例

引入后即可使用，拖动元素的内容为插槽中的内容。

<RkmobileDrag>
     <div>345</div>
</RkmobileDrag>

如上，将该组件内部插槽内容为<div>345</div>，会放置到<slot></slot>的位置。