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;

width: 50px;

background: #666;

}

</style>

</head>

<body>

<div class="main">

<div class="left" @mousedown='drag($event)' >

<div style='width: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>