<body>
<div
id
=
"app"
>
<!-- 自定义的指令在使用时需添加v-前缀 -->
<div
v-drag
=
"123"
id
=
"box"
>
helloworld
</div>
<p
v-drag
>
段落
</p>
</div>
</body>
<script
src
=
"vue.js"
></script>
<script>
// Vue.directive，用于全局注册一个指令，第一个参数是指令名字，第二个参数是指令的配置对象
Vue
.
directive
(
"drag"
,{
// 指令配置对象中inserted方法，当指令被插入到元素中时指令，一般用于设置指令的具体功能。
// inserted函数中，第一个参数是指令所在的元素对象，第二个参数是指令信息。
inserted
(
el
,
dir
){
// console.log(el);
el
.
style
.
position
=
"relative"
;
el
.
style
.
left
=
"0px"
;
el
.
style
.
top
=
"0px"
;
// console.log("指令被识别了");
function
mv
(
e
){
let
offX
=
e
.
pageX
-
prevX
;
let
offY
=
e
.
pageY
-
prevY
;
el
.
style
.
left
=
parseInt
(
el
.
style
.
left
)
+
offX
+
"px"
;
el
.
style
.
top
=
parseInt
(
el
.
style
.
top
)
+
offY
+
"px"
;
prevX
=
e
.
pageX
;
prevY
=
e
.
pageY
;
}
let
prevX
=
0
;
let
prevY
=
0
;
el
.
addEventListener
(
"mousedown"
,
function
(
e
){
prevX
=
e
.
pageX
;
prevY
=
e
.
pageY
;
document
.
addEventListener
(
"mousemove"
,
mv
)
})
document
.
addEventListener
(
"mouseup"
,
function
(){
document
.
removeEventListener
(
"mousemove"
,
mv
);
});
}
})
new
Vue
({
el:
"#app"
,
data:
{
}
})
<
/script>
