vue js 可随意拖动盒子以及禁止拖拽_星良辰寻的博客-程序员宅基地

技术标签： vue JS

可拖动弹窗：
1.新建一个js，放置如下js代码

import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一：指令的名称，定义时指令前面不需要写v-
//2.参数二：是一个对象，该对象中有相关的操作函数
//3.在调用的时候必须写v-
const drag = Vue.directive('drag', {
    //1.指令绑定到元素上回立刻执行bind函数，只执行一次
    //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
    //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
    bind: function (el) { },
    //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
    inserted: function (el) {
        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 - disy + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    },
    //当VNode更新的时候会执行updated，可以触发多次
    updated: function (el) { }
})
export default drag;

2.main.js全局导入
// 可拖动弹窗
import drag from ‘@/utils/drag’;
3.使用
在这里插入图片描述
即可随意拖动此盒子啦~
同理禁止拖拽可同样的使用这种方法：例如input框不想被拖拽，则添加以下代码：

import Vue from 'vue';
const stopDrag = Vue.directive('stopDrag', {
    inserted: function (el, binding, vnode) {
        let element = el;
        element.onmousedown = function (e) {
            e.stopPropagation()
        }
    }
})
export default stopDrag;

同样的在main.js导入
在vue中绑定如下：
在这里插入图片描述

本文链接：https://blog.csdn.net/josiecici/article/details/108869570

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

SQL SERVR 创建与添加外键_sqlserver创建外键语句_零一魔法的博客-程序员宅基地

【参考】创建外键关系 - microsoft : https://docs.microsoft.com/zh-cn/sql/relational-databases/tables/create-foreign-key-relationships?view=sql-server-ver15在新表中创建外键约束-- 代码引用自 https://docs.microsoft.com/zh-cn/sql/relational-databases/tables/create-foreign-key-relat._sqlserver创建外键语句

pe查看原系统IP配置_pe界面怎么查看原系统ip配置-程序员宅基地

【阅读文章申明】作者只是想把自己实践中的经验分享给大家，如果文章里面有在大神面前显的很低级的知识点。那么大神你可以不看，请不要发一些“浪费流量”“辣鸡”之类嘲讽的话，每一篇文章都是作者自己。截图，编辑，排版制作而且。我相信CSDN的所有UP都和我一样。人都是在不断学习不断进步。如果文章你觉得辣鸡，请你绕道别装逼，大家已经过了装逼的年龄了。1、人进入PE2、打开注册表 —— 选中“HKEY_LOCAL”项。（其他项会无法加载配置单元）2、选择【文件】—— 【加载配置单元】3、选择路径_pe界面怎么查看原系统ip配置

详述Spring XML文件——调用有参构造方法并为参数赋值_applicationcontext.getbean 有参构造-程序员宅基地

目录一、如可调用构造方法1、写一个UserInfo类：2、SpringXML文件做如下配置：3、写一个Test类二、为构造方法不同类型参数赋值1、自定义对象1）编写UserInfo类2）配置XML文件3）编写Test类2、数组1）编写UserInfo类2）配置XML文件3）编写Test类3、List集合1）编写UserInfo类..._applicationcontext.getbean 有参构造

1：完成留言效果 2：完成拖动标题控制弹框拖拽 3 : 给弹框添加一个自定义的右键菜单...-程序员宅基地

css部分*{ margin: 0; padding: 0;}body,html{ width: 100%; height: 100%; position: relative;}li{ margin-top: 10px; list-style: none; border-bottom: 1px dashed #ccc;}#box{ width: 500px; border: 2px solid...

不错的网站~ 收藏了qwq_能代替orzqwq的网站-程序员宅基地

1 我最开始看的这篇https://github.com/liangxiaojuan/vue-todos2 很全的资料收藏https://github.com/budaLi/-Learning-materials-3 在线压缩图片的网站http://www.bejson.com/ui/compress_img/==========================..._能代替orzqwq的网站

DirectX11与游戏编程学习路线自拟-程序员宅基地

最近学习了龙书（DX11版本）简要的翻了翻，对于初学者还是有很大的难度。因此，制定了下关于学习游戏编程以及游戏引擎的路线。学习使用游戏引擎学习游戏引擎之前需要了解一下如何使用游戏引擎我打算从Unity3d入手，先了解游戏引擎所具备的功能，对于游戏引擎有初步的了解。目标：实现demo，可以做出一个小项目。进一步的了解游戏引擎可以按照如下列出的书单由浅入深的进行学习。1.逐梦旅程 : Windo

随便推点

jQuery Mobile 简介-程序员宅基地

jQuery Mobile 是一种 web 框架，用于创建移动 web 应用程序。您应该具备的基础知识在您开始学习 jQuery Mobile 之前，您应该对以下知识有基本的了解：HTMLCSSjQuery如果您需要首先学习这些项目，请在本姐访问这些教程。什么是 jQuery Mobile？jQuery Mobile 是一个为触控优化的框架，

C#爬虫必备：使用wininet接口发起http请求_c# cookiecontainer转string_美奇开发工作室的博客-程序员宅基地

封装好的类：using System;using System.Collections;using System.Drawing;using System.IO;using System.Net;using System.Runtime.InteropServices;using System.Text;using System.Text.RegularExpressions;namespace 测试{ public class Wininet { ._c# cookiecontainer转string