• vue简单的自由拖拽


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 -</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <style>
    .left,.right{
    position: absolute;
    height: 50px;
    50px;
    background: #666;
    }
    </style>
    </head>
    <body>
    <div class="main">
    <div class="left" @mousedown='drag($event)' >
    <div style='20px;height:20px;background:red'></div>
    </div>
    <!-- <div class="right"></div> -->
    </div>
    <script>
    var vm1=new Vue({
    el:'.main',
    data:{
    ths:[
    {top:'30'},
    {top:''}
    ]
    },
    methods:{
    drag:function(e,index){
    console.log(e.target.parentNode.children[0])
    var Left=e.target;
    // leftW=Left.offsetWidth,
    // startX=e.clientX;
    // _this=this;
    // console.log(_this);

    document.onmousemove=function(e){
    e.preventDefault();
    var distx=e.clientX;
    var disty=e.clientY
    // -startX;
    Left.style.top=disty+'px';
    Left.style.left=distx+'px';
    // if(parseInt(Left.style.width)>=280){
    // Left.style.width=280+'px';
    // }
    }

    document.onmouseup=function(){
    document.onmousemove=null;
    }
    }
    }
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    JSP第七次作业
    JSP第六次作业
    Jsp第五次作业
    软件测试第二次作业
    Jsp第四次作业2
    Jsp第四次作业1
    软件测试第一次作业
    JSP第三次作业
    JSP第二次作业
    第七次作业
  • 原文地址:https://www.cnblogs.com/zzh965390267/p/8353001.html
Copyright © 2020-2023  润新知