vue实现可拖拽div

参考：vue实现可拖拽div

HTML

<div class="drag-box" v-drag id="drag" v-if="isShowDrag"><Button type="primary" @click.stop="isShowDrag = false">关闭</Button>
</div>

CSS

.drag-box {position:absolute;top: 100px;left:100px;width:100px;height:100px;background: #fff;border-radius: 5px;box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

export default {data(){return {isShowDrag: false,}},//自定义指令directives: {drag: {// 指令的定义bind: function(el) {let oDiv = el;  // 获取当前元素oDiv.onmousedown = (e) => {console.log('onmousedown')// 算出鼠标相对元素的位置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;}}}}},
}

vue实现可拖拽div相关推荐

vue实现鼠标拖拽div滚动效果-vue-dragscroll（整理）
效果图: 1. 打开终端,输入npm install vue-dragscroll 回车运行完即可. npm install vue-dragscroll 2.下面代码放入你的vue项目的main.j ...
vue 拖拽div 自定义div拖拽
js 可拖拽div内容框记录 1.css样式 .dragDrop{width:220px;height:88px;line-height:88px;text-align: center;backgro ...
vue中实现拖拽排序
原生拖拽 API 实现拖拽设置元素 dragable 将元素的 dragable 属性设置为 true (文本图片链接的draggable 属性默认为 true)则元素可拖放 <div ...
vue移动端拖拽悬浮按钮
vue移动端拖拽悬浮按钮功能介绍: 大致需求: 整体思路: 简单效果展示: 具体实现: 一.position:fixed布局: 二.touch事件绑定: 三.页面引入: 功能介绍: 在移动端开发中, ...
html div 可鼠标滚动,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
用鼠标左右拖拽 html,js实现鼠标拖拽div左右滑动
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 Title body{ position: relative; margin:0; padding:0; width ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown:鼠标的按下事件 onmouseove:鼠标的移动事件 onmouseup:鼠标的松开事件思路: 想实现鼠标拖拽div移动的效果,就得先获取到div,然后给div绑定鼠标按下的 ...
Vue 实现图片拖拽功能
功能背景: 需要对导航栏的icon,支持拖拽排序功能,然后自动保存. 原理讲解: 随意拖动一张图到另外一个图片上面时,两张图片交换位置. 原理:现有一个图片的列表,拖动其中一个图片(触发dragsta ...

vue实现可拖拽div

vue实现可拖拽div相关推荐

最新文章

热门文章