<!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>