用vue的自定义组件写了一个拖拽 组件,局部的 只能在自定义元素内的

简单实现  没有做兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <div id="box"> <drag></drag> </div> <template id="drag">
<div :style="json" @mousedown="move($event)"></div>
</template>
<script src="lib/bower_components/vue/dist/vue.js"></script> <script>
new Vue({ el:"#box", //Vue对象作用的范围 components:{ 'drag':{ //drag标签 data:function(){ return { json:{width:"100px",height:"100px",
background:"red",position:"absolute"
}
} }, methods:{ move:function(el){ var obj=this.$el;
var disX=el.clientX-obj.offsetLeft;
var disY=el.clientY-obj.offsetTop; document.onmousemove=function(el){ var left=el.clientX-disX;
var top=el.clientY-disY; obj.style.left=left+"px";
obj.style.top=top+"px"; document.onmouseup=function(){ document.onmousemove=null;
document.onmouseup=null; }
return false; }
return false; } }, template:"#drag"
} } });
</script>
</body>
</html>
上一篇:Java多线程学习(吐血超详细总结)(转)


下一篇:Win8.1安装Visual Studio 2015提示需要KB2919355