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 easyui combox一些实用的小方法
Dec 25 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 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
咖啡与牛奶
2021/03/03 冲泡冲煮
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
php中opendir函数用法实例
2014/11/15 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Python爬取三国演义的实现方法
2016/09/12 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python collections模块使用方法详解
2019/08/28 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Python函数参数分类原理详解
2020/05/28 Python
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript