Vue实现开关按钮拖拽效果

2024-07-28 12:42:12

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue实现移动端触屏拖拽功能

vue实现移动端可拖拽浮球,供大家参考,具体内容如下 1 首先创建一个div <div class="floatball" id="floatball" @mousedown="down" @touchstart.stop="down" @mousemove="move" @touchmove.stop="move" @mouseup="end" @touche
Vue实现移动端拖拽交换位置

本文实例为大家分享了Vue实现移动端拖拽交换位置的具体代码,供大家参考,具体内容如下 <template> <div class="imageUploaderPage"> <ul ref='imgList' class="imgList"> <li ref='imgItem' class="imgCoverItem" v-for='(item, index) in filesResults' :key='
vue悬浮可拖拽悬浮按钮的实例代码

前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发线上体验使用将 src/components文件夹下的s-icons组件放到你的组件目录下使用组件 // template <template> <div> <
Vue实现简单的拖拽效果

本文实例为大家分享了Vue实现简单拖拽效果的具体代码,供大家参考,具体内容如下自定义指令v-drag l 存在时只能横向拖拽 t 存在时只能纵向拖拽 lt都存在时可以任意方向拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
Vue实现开关按钮拖拽效果

本文实例为大家分享了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:
Vue.Draggable实现拖拽效果

快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":
vue实现弹窗拖拽效果

本文实例为大家分享了vue实现弹窗拖拽效果的具体代码,供大家参考,具体内容如下前言实现拖拽其实简单来说就分为三步一.创建一个js文件因为本身dialog窗口不具备移动拖拽能力,所以需要以下方法去实现,在src/components同级文件下创建utils文件夹,然后创建名为directives.js的文件. directives.js的代码如下: import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag
vue实现拖拽效果

vue中实现拖拽效果,供大家参考,具体内容如下首先要搞明白分清clientY pageY screenY layerY offsetY的区别作用3(事件对象中记录的鼠标位置) 语法解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点(不计算滚动条位置) evt.clientY evt.pageX 相对于浏览器的客户端左上角为原点(计算滚动条的位置) evt.pageY evt.offsetX 以自己的左上角
基于vue实现一个禅道主页拖拽效果

效果图如下所示: 源码地址 bb两句最近在做一个基于vue的后台管理项目.平时项目进度统计就在上禅道上进行.so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面. 既然领导发话,那就开干.. 所有技术:vue + vuedraggable 拖动的实现基于 vuedraggable 的插件开发. 主页为两栏流式布局,每一个组件可以在上下拖动,也可以左右拖动. 基本步骤布局这块布局为最为普通的两栏布局,这里采用flex布局.左边自适应,右边为固定宽. .layout-containe
基于Vue实现拖拽效果

效果图 demo1.gif 分清clientY pageY screenY layerY offsetY的区别在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY
vue项目中实现el-dialog组件可拖拽效果

目录 0. 首先上图,看效果 1. 实现方法参考资料 0. 首先上图,看效果 1. 实现方法第一步:创建 drag.js文件实现拖拽源码 /** * 拖拽移动 * @param {elementObjct} bar 鼠标点击控制拖拽的元素 * @param {elementObjct} target 移动的元素 * @param {function} callback 移动后的回调 */ export function startDrag(bar, target, call
Vue利用draggable实现多选拖拽效果

目录前言实现思路 Demo全部代码 Demo实现效果前言最近产品提出一个排序需求,希望能进行拖拽排序,我一想,vue2插件这么多,sortable.js.draggable分分钟实现了,但是还有一个需求希望能够实现多选拖拽,这个就有点麻烦,查询了许多资料,暂时没有发现能够多选的拖拽组件,如果自己写一个,既耗费时间,实现效果上必然没有draggable这种成熟轮子效果好,于是决定基于draggable做改进. 实现思路我们知道draggable插件只要设置相同的group名字就能实现分组
vue + gojs 实现拖拽流程图效果

目录一.流程图效果二.为什么选go.js流程图插件去开发项目? 三.项目开发四.当前画布的监听事件名称包括五.迭代篇 (一).项目的迭代. (二).整体用的js方法 (三).功能分析一.流程图效果最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发.其次,要依赖于内部API开发需求,开发项目需求的时候就要花费大量的时间去熟悉go.js的API,然后才能进行开发.话不多说,我就先把我最近做的项目案例效果

Vue实现开关按钮拖拽效果

相关推荐

随机推荐