html:

<div id="app1">
<div v-drag class="drag"></div>
<div v-drag class="drag"></div>
</div>

css:

.drag{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: red;
}

js:

    // 拖动div元素
let vm1 = new Vue({
el:'#app1',
// 自定义指令
directives:{
drag(el,bindings){
el.onmousedown = function(e){
var disx = e.pageX - el.offsetLeft;
var disy = e.pageY - el.offsetTop;
document.onmousemove = function (e){
el.style.left = e.pageX - disx+'px';
el.style.top = e.pageY - disx+'px';
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
}
}
}
})

vue实现拖动div元素的更多相关文章

  1. VUE001. 拖动div盒子(自定义指令v-directives)

    拖动div是一个逻辑很简单的需求,监听容器的鼠标按下松开的事件,执行函数通过DOM改变标签的CSS偏移量. 在VUE构建的项目中,通过标签的 @mousedown 和 @mouseup 赋予行为事件, ...

  2. javascript拖动div

    div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right ...

  3. 在触屏设备中拖动 overflow 元素

    在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...

  4. JS拖动DIV布局

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  5. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  6. 拖动DIV

    链接:https://www.cnblogs.com/joyco773/p/6519668.html   移动端:div在手机页面上随意拖动   1 <!doctype html> 2 & ...

  7. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  8. HTML5 元素拖动 - 实现元素左右拖动, 或更改自身排序

    1.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持:Int ...

  9. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

随机推荐

  1. html页面自动跳转

    <script type="javascrpit"> var url='';//需要跳转的页面 var search = window.location.search; ...

  2. Java互联网架构师系统进阶课程学习 (3)【享学】

    3.原子操作CAS Atom(不可分割) 什么是原子操作?如何实现原子操作? syn基于阻塞的锁的机制,1.被阻塞的线程优先级很高,2.拿到锁的线程一直不释放锁怎么办?3.大量的竞争,消耗cpu,同时 ...

  3. js遍历终极大法--再也不用苦逼的for循环了

    while循环 while后面跟循环条件和执行语句,只要满足条件,就会一直执行里面的执行 var i = 0 while(i<10){ console.log(i) i++ } do...whi ...

  4. 物理机安装ESXi并优化部署虚拟机

    物理机配置 CPU,BIOS中启用虚拟化(VT-X) 内存和硬盘,内存尽量大.硬盘最好SSD,内存的大小和硬盘的速度直接决定了虚拟机运行的快慢 网络,至少一块千兆网卡(vSphere7.0版本以后支持 ...

  5. 制作Java桌面程序的一键安装包

    一.简介 这个打包程序主要包含了对Java程序的普通打包.对程序的管理员权限设置.因为自己打包的时候要求程序在32位操作系统和64位操作系统下都能使用,所以有些打包步骤和设置都不相同.打包过程中主要使 ...

  6. 基于ScheduledExecutorService的并发定时任务处理能力测试

    测试代码 定时器类 package business.util; import java.util.concurrent.Executors; import java.util.concurrent. ...

  7. C语言中的stdin,stdout,stderr[转]

    我们在写C程序时经常遇到printf(),fprintf(),perror(),这些东西到底有什么作用.说到这不得不提及stdin,stdout,stderr.想想,我们在用C去写文件时的操作,Fil ...

  8. vue--三种组件中之间的传值

    参考网址:https://www.jianshu.com/p/46573a741c29 一.父子组件之间的传值----props/$emit 组件之间的传值,我们比较常用到的是props/$emit ...

  9. C#多线程---Task实现异步

    一.场景 使用Task来进行累加操作. 二.例子-Task使用 1 using System; 2 using System.Collections.Generic; 3 using System.L ...

  10. 一 MongoDB入门

    一.MongoDB概念解析(对比MySQL学习): 举个例子: MongoDB可视化操作工具:推荐Robomongo 二.MongoDB默认的概念: 1.MongoDB的单个实例可以容纳多个独立的数据 ...