vue 写简单拖拽
2020-10-13 本文已影响0人
lucky_yao
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义指令</title>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
background: greenyellow;
}
</style>
</head>
<body>
<div id="app">
<div class="box" v-focus></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.directive("focus", function (el) {
el.onmousedown = function (ev) {
var sX = ev.clientX - el.offsetLeft;
var sY = ev.clientY - el.offsetTop;
document.onmousemove = function (ev) {
var eX = ev.clientX - sX;
var eY = ev.clientY - sY;
if (eX < 0) {
eX = 0;
}
if (eY < 0) {
eY = 0;
}
el.style.left = eX + "px";
el.style.top = eY + "px";
};
document.onmouseup = function () {
document.onmousemove = null;
};
};
});
let app = new Vue({
el: "#app",
data: {
},
});
</script>
</html>
