vue 拖拽【单个div实现拖拽】
1、HTML<div class="kongtiaojifang" ref="kongtiao" @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)"></div>2、JS<script>export default {name: ...
·
1、HTML
<div class="kongtiaojifang" ref="kongtiao" @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)">
</div>
2、JS
<script>
export default {
name: 'zhinengjifang',
data () {
return {
moveDataelse: {
x: null,
y: null
}
}
},
mounted () {
},
beforeDestroy () {
},
components: {
},
methods: {
mouseDownHandleelse (event) {
this.moveDataelse.x = event.pageX - this.$refs.kongtiao.offsetLeft
this.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTop
event.currentTarget.style.cursor = 'move'
window.onmousemove = this.mouseMoveHandleelse
},
mouseMoveHandleelse (event) {
let moveLeft = event.pageX - this.moveDataelse.x + 'px'
let moveTop = event.pageY - this.moveDataelse.y + 'px'
this.$refs.kongtiao.style.left = moveLeft
this.$refs.kongtiao.style.top = moveTop
},
mouseUpHandleelse (event) {
window.onmousemove = null
event.currentTarget.style.cursor = 'move'
console.log('鼠标松开了')
}
}
}
</script>
3、CSS
<style scoped lang='scss'>
.kongtiaojifang{
height: 200px;
width: 400px;
position: fixed;
top: 150px;
left: 550px;
cursor: pointer;
}
</style>
更多推荐
已为社区贡献17条内容
所有评论(0)