vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
Vue.directive(& # 39;拖# 39;,,{
,插入:function (el), {
el.onmousedown才能=function (ev) {
,,var disX=ev.clientX-el.offsetLeft;
,,var disY=ev.clientY-el.offsetTop;
,,document.onmousemove=function (ev) {
,,,var l=ev.clientX-disX;
,,,var t=ev.clientY-disY;
,,,el.style.left=l + & # 39; px # 39;;
,,,el.style.top=t + & # 39; px # 39;;
,,};
,,document.onmouseup=function () {
,,,document.onmousemove=零;
,,,document.onmouseup=零;
,,};
,,};
,}
}) 后面肯定要补充放大缩小功能,和把定位,宽度信息保留到vuex中的状态中
pS:下面看下面板拖拽之vue自定义指令,具体内容如下所述:
<强>前言
在指令里获取的这并不是vue对象,vnode。上下文才是vue对象,一般来说,指令最好不要访问vue上的数据,以追求解耦,但是可以通过指令传进来的值去访问法或裁判之类的。
<强> vue指令
官方文档其实已经解释的蛮清楚了,这里挑几个重点的来讲。
<强> 1参数
el:当前的节点对象,用于操作dom
绑定:模版解析之后的值
vNode: vue编译生成的虚拟节点,可以在上面获取vue对象
oldVnode:使用当前指令上一次变化的节点内容
<强> 2。生命周期
绑定:初始化的时候调用,但这时候节点不一定渲染完成
插入:被绑定元素插入父节点时调用,关于dom操作尽量在这里用
更新:就是内部。更新时会触发这里
<强>面板拖拽逻辑
使用相对的,舰艇事件上的clientX和clientY鼠标距离页面的位置来改变面板的顶部和左。
涉及属性
offsetLeft:距离参照元素左边界偏移量
offsetTop:距离参照元素上边界偏移量
clientWidth:此属性可以返回指定元素客户区宽度
clientHeight:此属性可以返回指定元素客户区高度
clientX:事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标
clientY:事件被触发时鼠标指针相对于浏览器页面(或客户区)的垂直坐标
onmousedown:鼠标按下事件
onmousemove:鼠标滑动事件
onmouseup:鼠标松开事件
<强>实现代码
<代码> & lt; div v-drag=? # 39; refName& # 39;“祝辞& lt;/div>
在绑定的组件上使用,价值非必选项,不挑就默认是基于文档的移动
指令:,{
,拖:{//,才能使用绑定会有可能没有渲染完成
,,插入:函数(el,绑定,vnode), {
const 才能;_el =, el,,//获取当前元素
const 才能;ref =, vnode.context。参考文献[binding.value];,//,判断基于移动的是哪一个盒子
const 才能;masterNode =, ref ?, ref :,文档;,//,用于绑定事件
const 才能;masterBody =, ref ?, ref :, document.body;,//,用于获取高和宽
const 才能;mgl =, _el.offsetLeft;
const 才能;mgt =, _el.offsetTop;
const 才能;maxWidth =, masterBody.clientWidth;
const 才能;maxHeight =, masterBody.clientHeight;
const 才能;elWidth =, _el.clientWidth;
const 才能;elHeight =, _el.clientHeight;
let 才能;positionX =, 0,
,,positionY =, 0;
_el.onmousedown 才能=,e =祝辞,{
,,//算出鼠标相对元素的位置,加上的值是保证金的值
,,let disX =, e.clientX 作用;_el.offsetLeft +,球型,,
,,let disY =, e.clientY 作用;_el.offsetTop +,管理;
,,masterNode.onmousemove =, e =祝辞,{
,,//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
,,let left =, e.clientX 作用;disX;
,,let top =, e.clientY 作用;disY;
,,//,绑定的值不能滑出基于盒子的范围
,,left & lt;, 0,,,, (left =, 0);
,,,left 的在,(maxWidth 安康;elWidth 作用;球型),,,,(=left maxWidth 作用;elWidth 作用;球型);
,,top & lt;, 0,,,, (top =, 0);
,,,top 的在,(maxHeight 安康;elHeight 作用;管理),,,,(=top maxHeight 作用;elHeight 作用;管理);
,,//绑定元素位置到positionX和positionY上面
,,positionX =,最高;
,,positionY =,离开;
,,
,,//移动当前元素
,,_el.style.left =, left +,“px";
,,_el.style.top =, top +,“px";
,,};
,,//,这里是鼠标超出基于盒子范围之后再松开,会监听不到
,,document.onmouseup =, e =祝辞,{
,,masterNode.onmousemove =,空;
,,document.onmouseup =,空;
,,};
,,};
,,}
,}
null
