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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
微信小程序收藏功能的实现代码
Jun 19 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
Smarty安装配置方法
2008/04/10 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
Javascript之String对象详解
2016/06/08 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python八皇后问题解答过程详解
2019/07/29 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
django正续或者倒序查库实例
2020/05/19 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
法学毕业生自我鉴定
2013/11/08 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
党的群众路线学习材料
2014/05/16 职场文书
土建工程师岗位职责
2014/06/10 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
三好生演讲稿
2014/09/12 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
先进个人事迹材料
2014/12/29 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
导游词之湖北武当山
2019/09/23 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL