Vue实现开关按钮拖拽效果


Posted in Javascript onSeptember 22, 2020

本文实例为大家分享了Vue实现开关按钮拖拽效果的具体代码,供大家参考,具体内容如下

css:

<style>
  .box {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: red;
  }
  .box2 {
    position: absolute;
    left: 400px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

html:

<div id="app">

  <div class="box" v-drag="isDrag"></div>

  <div class="box2" v-drag:fn.limit.b="isDrag"></div>

  <button @click="isDrag = !isDrag">{{isDrag}}</button>

</div>

js:

<script src="vue.js"></script>
<script>

  // 组件
  Vue.directive('drag', {
    bind(el, {value, arg, modifiers}) {
      console.log(value, arg, modifiers)
      el._value = value;
      el._isDrag = false;
      el.addEventListener('mousedown', function(e) {

        if (!el._value) return;

        el._isDrag = true;
        el._x = e.clientX - el.offsetLeft;
        el._y = e.clientY - el.offsetTop;

        e.preventDefault();
      });
      document.addEventListener('mousemove', function(e) {
        if (el._isDrag) {
          let l = e.clientX - el._x;
          let t = e.clientY - el._y;

          if (modifiers.limit) {
            if (l < 0) {
              l = 0;
            }
            if (t < 0) {
              t = 0;
            }
          }

          el.style.left = l + 'px';
          el.style.top = t + 'px';
        }
      });
      document.addEventListener('mouseup', function(e) {
        el._isDrag = false;
      });
    },

    componentUpdated(el, {value}) {
      console.log('更新了', value);
      el._value = value;
    }
  });

  let app = new Vue({
    el: '#app',
    data: {
      isDrag: false
    }
  });


</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
JS如何生成动态列表
Sep 22 #Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 #Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 #Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 #Javascript
Js跳出两级循环方法代码实例
Sep 22 #Javascript
vue 二维码长按保存和复制内容操作
Sep 22 #Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python抖音表白程序源代码
2019/04/07 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
指针和引用有什么区别
2013/01/13 面试题
探亲邀请信范文
2014/01/30 职场文书
还款承诺书范文
2014/05/20 职场文书
2015初中团委工作总结
2015/07/28 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
Golang gRPC HTTP协议转换示例
2022/06/16 Golang