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 相关文章推荐
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
Angular表单验证实例详解
Oct 20 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
微信小程序实现上传图片功能
May 28 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 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
PHP session会话的安全性分析
2011/09/08 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
javascript之学会吝啬 精简代码
2010/04/25 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
python实现统计代码行数的方法
2015/05/22 Python
python避免死锁方法实例分析
2015/06/04 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python匿名函数用法实例分析
2019/08/03 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
团队精神演讲稿
2013/12/31 职场文书
2015年教师新年寄语
2014/12/08 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL