前端实现鼠标拖拽功能

1.实现拖拽

页面：

   <div @mousedown="move" style="position: relative; "> 待拖动div </div>

实现方法：

        move(e){let odiv = e.currentTarget ;        //获取目标元素//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeft;let disY = e.clientY - odiv.offsetTop;document.onmousemove = (e)=>{       //鼠标按下并移动的事件//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disX;    let top = e.clientY - disY;//改变元素位置属性值，移动当前元素odiv.style.left = left + 'px';odiv.style.top = top + 'px';};document.onmouseup = (e) => { // 鼠标松开后不再移动document.onmousemove = null;document.onmouseup = null;};}

2.$event事件

e.target 是你当前点击的元素
e.currentTarget 是你绑定事件的元素
获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
获得点击元素的第一个子元素
e.currentTarget.firstElementChild
获得点击元素的下一个元素
e.currentTarget.nextElementSibling
获得点击元素中id为string的元素
e.currentTarget.getElementById(“string”)
获得点击元素的string属性
e.currentTarget.getAttributeNode(‘string’)
获得点击元素的父级元素
e.currentTarget.parentElement
获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML

3.clientY、pageY、screenY、layerY、offsetY的区别

         clientY 指的是距离可视页面左上角的距离pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)screenY 指的是距离屏幕左上角的距离layerY 指的是找到它或它父级元素中最近具有定位的左上角距离offsetY 指的是距离它自己左上角的距离

Vue 拖拽组件 vuedraggable 和 vue-dragging

参考原文：http://www.ptbird.cn/vue-draggable-dragging.html

1.vuedraggable

vuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。

使用方式：

yarn add vuedraggable
import vuedraggable from 'vuedraggable';

在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。

引入后直接声明该组件然后使用即可，示例代码：

<template><vuedraggable class="wrapper" v-model="list"><transition-group><div v-for="item in list" :key="item" class="item"><p>{{item}}</p></div></transition-group></vuedraggable>
</template><script>
import vuedraggable from 'vuedraggable';export default {name: 'HelloWorld',components: {vuedraggable},props: {},data() {return {list: [1,2,34,4,54,5]}},updated() {console.log(this.list)},methods: {}
}
</script>
<style scoped>
.wrapper {display: flex;justify-content: center;width: 100%;
}
.item{width: 300px;height: 50px;background-color: #42b983;color: #ffffff;
}
</style>

2.Awe-dnd

vue-dragging 的 npm 包的名字是 awe-dnd，并不是 vue-dragging，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。

相比及 vuedraggable 来说， awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。

安装依赖：

npm install awe-dnd --save
yarn add awe-and

使用：

import VueDND from 'awe-dnd'Vue.use(VueDND)
<!--your.vue-->
<script>
export default {data () {return {colors: [{text: "Aquamarine"}, {text: "Hotpink"}, {text: "Gold"}, {text: "Crimson"}, {text: "Blueviolet"}, {text: "Lightblue"}, {text: "Cornflowerblue"}, {text: "Skyblue"}, {text: "Burlywood"}]}},/* if your need multi dragmounted: function() {this.colors.forEach((item) => {Vue.set(item, 'isComb', false)})} */
}
</script><template><div class="color-list"><divclass="color-item"v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }":key="color.text">{{color.text}}</div></div>
</template>

可以发现绑定的时候 v-dragging="{ item: color, list: colors, group: ‘color’ }" 这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表，group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。

而提供的两个事件方法如下：

export default {mounted () {this.$dragging.$on('dragged', ({ value }) => {console.log(value.item)console.log(value.list)console.log(value.otherData)})this.$dragging.$on('dragend', (res) => {console.error(res);})}
}

一般使用的方法就是：

this.$dragging.$on('dragend', (res) => {console.error(res);
})