vue 拖拽【单个div实现拖拽】

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.offsetLeftthis.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTopevent.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 = moveLeftthis.$refs.kongtiao.style.top = moveTop},mouseUpHandleelse (event) {window.onmousemove = nullevent.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>

vue 拖拽【单个div实现拖拽】相关推荐

vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
因为涵盖的小细节比较多,所以代码比较长,建议大家复制运行来进行对应功能查看,我在代码中添加了大量的注释,以供大家阅读代码最终效果部分细节 1.鼠标选点时可能会超出底图位置 2.图片的backgro ...
vue项目中五小一大六宫格拖拽排序，6宫格拖拽换位，矩阵拖拽排序
背景:项目中用到1.4.6.9.12.16宫格排序,拖拽换位等场景,项目是监控的视频矩阵,用户矩阵拖拽排序换位,之前已经实现1.4.9.12.16等矩阵式排列的拖拽排序,但是六宫格要求五小一大,之前的 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...
js实现可拖拽的div
实现一个div可以被拖拽,代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
有趣且重要的css知识合集（1）纯css实现div左右拖拽效果
目前我看主流的都是用js来实现div拖拽效果,不过我个人觉得一直监听拖拽,会耗费很大的性能,毕竟监听盒子的宽高这些属性,都会触发浏览器的回流,并且我看了很多博客,他们是能用css实现div左右拖拽效果 ...
mousedown、mousemove、mouseup实现一个可拖拽的div
可拖拽的div 前言:前端开发当中不单单是简单的页面布局,很多的事件也应用在其中,比如一个窗口实现在整个页面的拖动的需求. 明确步骤 (1)对div设置position:absolute:属性并设置t ...
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
鼠标事件: onclick:在鼠标左健点击弹起之后触发的事件,即一次完整的鼠标点击过程.过程完成瞬间触发函数. onmousedown:事件会在鼠标按键被按下时发生. onmo ...

vue 拖拽【单个div实现拖拽】

vue 拖拽【单个div实现拖拽】相关推荐

最新文章

热门文章