簡單實現 沒有做兼容
<!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>
