<!DOCTYPE html>
<html>
<head>
<title>vue自定义指令</title>
<script type="text/javascript" src='vue.js'></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div v-drag style='width:100px;height:100px;background-color:red;position:absolute;'></div>
<script type="text/javascript">
//vue自定义指令
Vue.directive('drag', function(){
// this.el表示当前绑定该指令的元素
// 实现一个拖拽指令
this.el.onmousedown = function(e){
let eve = e || window.event;
let l = eve.clientX - this.offsetLeft;
let t = eve.clientY - this.offsetTop;
document.onmousemove = function(e){
let ev = e || window.event;
this.style.left = ev.clientX - l + 'px';
this.style.top = ev.clientY - t + 'px';
}.bind(this);
document.onmouseup = function(){
this.onmousemove = this.onmousedown = null;
}
}
});
new Vue({
el: 'body'
});
</script>
</body>
</html>
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
