zoukankan      html  css  js  c++  java
  • Vuejs实现拖拽效果

    <body>
    <div class="main">
    <div class="left" v-bind:style="{ths[0].width+'px'}"></div>
    <div class="right" @mousedown="drag"></div>
    </div>
    <script>
    var vm1=new Vue({
    el:'.main',
    data:{
    ths:[
    {'30'},
    {''}
    ]
    },
    methods:{
    drag:function(e,index){

    var Left=e.target.parentNode.children[0],
    leftW=Left.offsetWidth,
    startX=e.clientX;
    _this=this;
    console.log(_this);

    document.onmousemove=function(e){
    e.preventDefault();
    var distX=e.clientX-startX;
    Left.style.width=leftW+distX+'px';
    if(parseInt(Left.style.width)>=280){
    Left.style.width=280+'px';
    }
    }

    document.onmouseup=function(){
    document.onmousemove=null;
    }
    }
    }
    });
    </script>
    </body>

  • 相关阅读:
    去重
    JavaScript 数组
    变量
    2017.3.19 for
    2017.3.19 if,for
    2017.3.14
    2017.3.10
    2017.3.9
    2017.3.7-1
    2017.3.7
  • 原文地址:https://www.cnblogs.com/yanyufusu/p/7875315.html
Copyright © 2011-2022 走看看