html怎么移动到vue,vue自定义指令之拖动页面的元素

此案例中，用到了鼠标事件onmousedown、onmousemove、onmouseup

源代码如下：

Document

.outer div{

position:absolute;

100px;

height: 100px;

}

.outer .left{

background-color: red;

top:0;

left:0;

}

.outer .right{

background-color: blue;

top:0;

right:0;

}

Vue.directive('drag',function(el){

el.onmousedown = function(e){

//获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置

var divx = e.clientX - el.offsetLeft;

var divy = e.clientY - el.offsetTop;

//包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove

document.onmousemove = function(e){

//获取移动后div的位置：鼠标位置-divx/divy

var l = e.clientX - divx;

var t = e.clientY - divy;

el.style.left=l+'px';

el.style.top=t+'px';

}

document.onmouseup = function(e){

document.onmousemove = null;

document.onmouseup = null;

}

})

var vm = new Vue({

el:'#app'

})

html怎么移动到vue,vue自定义指令之拖动页面的元素相关推荐

Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
VUE通过自定义指令，只允许输入大写英文以及数字
在写之前需要知道几个功能对象的作用: 首先输入框输入的情况有键盘输入和粘贴输入的情况用到的组件有: input.onblur-onblur: 事件会在对象失去焦点时发生.Onblur 经常用于Jav ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
js：Vue.js自定义指令实现scroll下滑滚动翻页
Vue.js自定义指令实现scroll下滑滚动翻页核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...
vue 项目自定义指令实现防抖
自定义v-debounce指令实现click事件防抖该指令绑定的方法暂不支持传递参数,如需要传参数可以参考另一篇博客,防抖组件的实现工具uitls文件夹创建debounce.js文件代码如下 i ...
VUE使用自定义指令对普通 DOM 元素进行底层操作
使用vue的自定义指令来整合某个重复使用的底层操作举个聚焦输入框的例子,如下: 当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作).事实上,只要你在打开这 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
Vue.js 自定义指令
简介除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 D ...
Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...

html怎么移动到vue,vue自定义指令之拖动页面的元素

html怎么移动到vue,vue自定义指令之拖动页面的元素相关推荐

最新文章

热门文章