精华内容
下载资源
问答
  • vue写法非常的卡顿 <div v-for="(item, i) in cardList" :key="item" :ref="'box' + (i + 1)" :class="'card card' + item" @mousedown="down($event, i + 1)" @mousemove="move($event, i + 1)

    vue写法非常的卡顿

     <div
                v-for="(item, i) in cardList"
                :key="item"
                :ref="'box' + (i + 1)"
                :class="'card card' + item"
                @mousedown="down($event, i + 1)"
                @mousemove="move($event, i + 1)"
                @mouseup="up($event, i + 1)"
           >
    

    注释:因为有多个div需要拖动所以我用下标把不同坐标数据分开

    data数据

    页面会渲染五个div我就傻瓜式定义了五个坐标数据,欢迎大佬提供更好的办法

    [外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imbl.csdnimg.cn/e0488c77455Z49558yz6Dd3c977151626823.png?x-oss-process=ima有五个ge/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP5bCP5bCP5bCP5bCP55m9,size_15,color_FFFFFF,t_70,g_se,x_16)https://imgblog.csdnimg.cn/e0488c77455649558d3c977151626823.png?x-oss-process=ima有五个ge/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YmN56uv5bCP5bCP5bCP5bCP5bCP55m9,size_15,color_FFFFFF,t_70,g_se,x_16)]

    i就是下标主要用来区分这五个div

    isDragable是等鼠标抬起时候不要在让div跟随鼠标移动了
     down(e, i) {
          let dragObj = this.$refs['box' + i][0]
          this['isDragable' + i] = true
          this['currentX' + i] = e.clientX
          this['currentY' + i] = e.clientY
          this['objX' + i] = dragObj.offsetLeft
          this['objY' + i] = dragObj.offsetTop
        },
    
        move(e, i) {
          let dragObj = this.$refs['box' + i][0]
          if (this['isDragable' + i]) {
            let moveX = e.clientX - this['currentX' + i]
            let moveY = e.clientY - this['currentY' + i]
            dragObj.style.left = this['objX' + i] + moveX + 'px'
            dragObj.style.top = this['objY' + i] + moveY + 'px'
            dragObj.style.zIndex = 100
          }
        },
        
        up(e, i) {
          let dragObj = this.$refs['box' + i][0]
          this['isDragable' + i] = false
          dragObj.style.zIndex = 1
        },
    

    解决办法:使用原生document监听鼠标的坐标,拖动起来非常的丝滑

        <div v-for="(item, i) in cardList" :key="item" :ref="'box' + (i + 1)" :class="'card card' + item" @mousedown="down($event, i + 1)">
    

    在这里插入图片描述

    	 down(e, i) {
          let dragObj = this.$refs['box' + i][0]
          this.isMouseDown = true
          this['currentX' + i] = e.clientX
          this['currentY' + i] = e.clientY
          this['objX' + i] = dragObj.offsetLeft
          this['objY' + i] = dragObj.offsetTop
          console.log(document)
          document.onmousemove = e => {
            if (!this.isMouseDown) return
            let moveX = e.clientX - this['currentX' + i]
            let moveY = e.clientY - this['currentY' + i]
            dragObj.style.left = this['objX' + i] + moveX + 'px'
            dragObj.style.top = this['objY' + i] + moveY + 'px'
            dragObj.style.zIndex = 100 //让拖动的div权重最大
          }
          document.onmouseup = e => {
            if (!this.isMouseDown) return
            this.isMouseDown = false //鼠标抬起时候不要在跟随鼠标移动
            dragObj.style.zIndex = 1
          }
        },
    
    展开全文
  • vue实现拖动div

    千次阅读 2019-07-18 15:11:37
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...script type="text/javascript" src="./js/vue.min.js"></scri...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="./js/vue.min.js"></script>
        <style type="text/css">
            .drag{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
            }
            .active{
                border: 1px solid blue;
            }
            .redBorder{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
    <div id="app1">
            <h3>{{x}},{{y}}</h3>
            <div v-drag="{setXY:setXY,getFlag:getFlag,setFlag:setFlag,setActive:setActive,setRedBorder:setRedBorder}" class="drag" :class="{active:isActive,redBorder:redBorder}"></div>
    <!--        <div v-drag class="drag"></div>-->
    </div>
    <template>
    
    </template>
    <script type="text/javascript">
        // 拖动div元素
        let vm1 = new Vue({
            el:'#app1',
            data:{
                x:"0",
                y:"0",
                flag:0,
                isActive:false,
                redBorder:true,
            },
            methods:{
                setXY:function (x,y) {
                    this.x=x;
                    this.y=y;
                },
                getFlag:function () {
                    return this.flag;
                },
                setFlag:function (num) {
                    this.flag=num;
                },
                setActive:function (b) {
                    this.isActive=b;
                },
                setRedBorder:function (b) {
                    this.redBorder=b;
                }
            },
            // 自定义指令
            directives:{
                drag(el,binding){
                    el.onclick = function(e){
                        debugger;
                        var flag = binding.value.getFlag();
                        flag = !flag;
                        var disx = e.pageX - el.offsetLeft;
                        var disy = e.pageY - el.offsetTop;
                        document.onmousemove = function (e){
                            var xx = e.pageX - disx+'px';
                            var yy = e.pageY - disy+'px'
                            el.style.left = xx;
                            el.style.top = yy;
                            binding.value.setXY(xx,yy)
                        };
                        if (!flag) {
                            document.onmousemove = document.onmouseup = null;
                        }
                        binding.value.setFlag(flag);
                        binding.value.setActive(flag);
                        binding.value.setRedBorder(!flag);
                    }
                }
            }
        })
    </script>
    </body>
    </html>
    
    展开全文
  • <template> <div class="drag"> <div ref="element" class="content" v-drag draggable="false"> <p>文字网页</p> </div> <div style="hei...
    <template>
        <div class="drag">
           <div ref="element" class="content" v-drag draggable="false">
              <p>文字网页</p>
           </div>
           <div style="height:2000px;width:100%"></div>
        </div>
    </template>
    <script >
       export default {
            data(){
                return {
                    dd:"",
                    inout:""
                }
            },
            directives: {
                drag(el){
                    let oDiv = el; //当前元素
                    let self = this; //上下文
                    //禁止选择网页上的文字
                    document.onselectstart = function() {
                        return false;
                    };
                    oDiv.onmousedown = function(e){
                        //鼠标按下,计算当前元素距离可视区的距离
                        let disX = e.clientX - oDiv.offsetLeft;
                        let disY = e.clientY - oDiv.offsetTop;
                        document.onmousemove = function(e){
                            //通过事件委托,计算移动的距离
                            let l = e.clientX - disX;
                            let t = e.clientY - disY;
                            //移动当前元素
                            oDiv.style.left = l + "px";
                            oDiv.style.top = t + "px";
                        }
                        document.onmouseup = function(e){
                            document.onmousemove = null;
                            document.onmouseup = null;
                        };
                        //return false不加的话可能导致黏连,就是拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效
                        return false;
                    };
                }
            }
       }
    </script>
    <style>
    .drag{
        position: relative;
    }
    /* position:absolute;这个还是要设的,不然拖动块定不了位置 */
    .content{
        position:absolute;
        height:100px;
        width:100px;
        background-color: #67C23A;
        cursor: pointer;
    }
    </style>
    
    

     

    展开全文
  • div ref="scrollContainer"@mousewheel="MouseWheel"></div> </template> 对应的MouseWheel方法 MouseWheel(e){ leteventDelta=-e.wheelDelta||-e.deltaY*40; let$scrollWrapper=this.$refs....

    <template>

    <div ref="scrollContainer" @mousewheel="MouseWheel"></div>

    </template>

     

    对应的MouseWheel方法

    MouseWheel(e){

          let eventDelta = -e.wheelDelta || -e.deltaY * 40;

          let $scrollWrapper = this.$refs.scrollContainer

          // console.log($scrollWrapper.scrollLeft)

          // 0到scrollLeft为滚动区域隐藏部分

          $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;

        }

    展开全文
  • 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样 一、HTML代码 <templete> <div class="box" ref="box"> <div class="left"> <!--左侧div内容-...
  • vue实现可拖拽div

    千次阅读 2020-09-28 20:04:55
    div class="drag-box" v-drag id="drag" v-if="isShowDrag"> <Button type="primary" @click.stop="isShowDrag = false">关闭</Button> </div> CSS .drag-box { position:absolute; top: ...
  • div class="table_box" v-drag ></div> export default { data(){ return { isShowDrag: false, } }, //自定义指令 directives: { drag: { // 指令的定义 bind: function(el) { let oDiv =...
  • 我们可以做一个单独的组件,通过监听鼠标的down,move以及up事件来实现拖动边框,改变元素宽度功能。 下面我们写一个组件Xhandle.vue。 <template> <div class="x-handle" @mousedown="mouseDown">&...
  • 1.初次实现 1.1 html代码 <... <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...div change width by drag</title> [removed][removed] </h
  • vue 拖动div 改变宽度

    2021-08-14 14:58:25
    div class="box" > <div class="left"> <!--左侧div内容--> </div> <div class="resize" title="收缩侧边栏"> ⋮ </div> <div class="mid"> <!--右侧div内容--&...
  • vue实现鼠标经过动画

    2020-12-30 03:02:39
    本文实例为大家分享了vue实现鼠标经过动画的具体代码,供大家参考,具体内容如下 详细代码: <div class=hello> <h1>{{ msg }} <div class=box> <div class=boxchilde mouseenter=flag mouseleave=flag> ...
  • vue自定义指令拖动div

    2019-10-01 21:59:42
    //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置 left = e.clientX - disX; top = e.clientY - disY; //移动当前元素 odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; //将此时的位置传...
  • 这里用到了js的三个鼠标事件,分别是onmousedown(鼠标按下)、onmousemove(鼠标移动)以及onmouseup(鼠标松开),大致流程就是鼠标按下拖动图标进行拖动时,动态获取当前div的left和top再重新赋值给当前div的top、...
  • vue实现 可拖拽的div

    2021-07-16 15:04:09
    可拖拽的div 今天发现右下角的一组按钮很挡视线,但是它还就应该放到右下角,所以在想,让它可以拖拽,在挡视线的时候拖走就好了。 这个功能不一定非要vue实现嘿嘿,其实就是这个逻辑,html + css + js 也可以这样做...
  • vue 鼠标拖动

    2019-10-09 00:30:17
    <div data-id= " 0 " id= " box " ></div> " ./vue.js " > Vue.directive( " drag " ,(el,{modifiers,value})=> { el.style.position = " absolute " ; let {x,y} = modifiers; el....
  • Vue 原生可拖动div(带手柄)

    千次阅读 2018-04-10 21:51:29
    div id="app1"&gt; &lt;div id="drag" &gt; &lt;div v-drag class="toolBarTitle move"&gt;移动工具栏&lt;/div&gt; &lt;/div&gt; &lt;/...
  • 拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。
  • directives: { drag: { // 指令的定义 bind:... //return false不加的话可能导致黏连,就是拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效 return false; }; }, }, }, 调用 <div class="loading" v-drag>div>
  • 首先看效果,如图,鼠标悬浮在地图的右上角小框中时,提示“拖动调整大小”,可以给小框加个好看的图标。点击可以进行拖拽。 基于上一篇博客:https://blog.csdn.net/acoolgiser/article/details/84866426 实现...
  • vue实现拖动元素

    2021-03-29 14:46:06
    拖动元素要加 v-drag <div v-drag >{{ fromData.text }}</div> directives: { drag: function(el) { let dragBox = el; dragBox.onmousedown = e => { //算出鼠标相对元素的位置 let disX =...
  • 解析vue界面中可拖动<div>、<img>

    千次阅读 2018-12-19 20:59:28
    若要拖动div,首先应在div上添加绑定事件@mousedown=“mousedown”,这样当点击div时可触发相应函数。 &amp;lt;div width=&quot;150px&quot; height=&quot;150px&quot; @mousedown=&...
  • </div> </div> </body> <script> new Vue({ el:"#app", data:{ flags: false, position: { x: 0, y: 0 }, nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '', }, methods: { //...
  • Vue---拖动侧边栏改变div宽度

    千次阅读 2019-08-15 10:23:00
    实现左右拖拽布局功能:当拖动分割线时,可以重置左右两侧模块宽度实现宽度自定义。 首先搞清楚几个值的概念 (1)clientX 与 clientWidth clientX:鼠标点击时位置距离当前body可视区域的x坐标 clientWidth: (2)...
  • vue实现div拖拽

    2021-07-19 08:44:36
    div> <el-form label-width="33%"> <el-row> <el-col :span="2"> <el-button type="primary" @click="addText">添加文本框</el-button> </el-col> <el-col :span=
  • vue 多个div拖拽

    千次阅读 2020-04-21 20:22:01
    // } }) let app = new Vue({ el:"#app", data:{ //通过data可以达到数据互通 isDrag:false, //第一个div isDrag2:false //第二个div的参数 }, // methods:{ //方法1的 // clic:function(){ // butt = !butt // } /...
  • vue中手动拖拽div改变高度

    千次阅读 2021-01-28 11:09:06
    vue中手动拖拽div改变高度 项目的需求是可以手动拖拽底部div(红色区域),动态改变高度 我参考了一位网友的文章,改造适用自己的场景,但是找不到他的地址了。 核心是自定义一个指令,然后针对当前元素的鼠标事件...
  • 今天给大家利用vue自定义指令做一个简单拖拽效果,所谓自定义指令就是Vue除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。因为Vue自带的指令都是比较偏向于工具化,有些时候在实现...
  • 鼠标拖动图片(完整代码在最后) 预览: 层级关系主要是: 最外层控制整个区域大小的盒子(mapbox) 中间层用来包裹图片的table(使用 td 才可以使用百分比控制图片大小) 最内层图片本体 <template> <div class=...
  • 基于Vue鼠标拖拽选择组件 演示版 入门 安装 npm install vue-drag-select-pro --save yarn add vue-drag-select-pro 文档 进口 import Vue from 'vue' import App from './App.vue' import vueDragSelectPro from ...
  • 拖动的元素在鼠标按下时通过时间差给元素添加一个属性(drag-flag),若超过规定时间则认为是在拖拽,属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。 html: <div ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,488
精华内容 595
关键字:

vue鼠标拖动div

vue 订阅