Vueを使用して簡単なカスタムドラッグ機能を実現
3833 ワード
Document
<span style="color:#000000;">
Vue.directive(</span>"drag",(el,{modifiers,value})=><span style="color:#000000;">{
el.style.position </span>= "absolute"<span style="color:#000000;">;
let {x,y} </span>=<span style="color:#000000;"> modifiers;
el.addEventListener(</span>"mousedown"<span style="color:#000000;">,donw);
</span><span style="color:#0000ff;">var</span><span style="color:#000000;"> disX,disY;
</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> donw(e){
disX </span>=<span style="color:#000000;"> e.offsetX;
disY </span>=<span style="color:#000000;"> e.offsetY;
document.addEventListener(</span>"mousemove"<span style="color:#000000;">,move);
document.addEventListener(</span>"mouseup"<span style="color:#000000;">,up)
}
</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> move(e){
</span><span style="color:#0000ff;">var</span> l = e.clientX -<span style="color:#000000;"> disX;
</span><span style="color:#0000ff;">var</span> t = e.clientY -<span style="color:#000000;"> disY;
</span><span style="color:#0000ff;">if</span><span style="color:#000000;">(value){
</span><span style="color:#0000ff;">if</span><span style="color:#000000;">(x){
el.style.left </span>= l + 'px'<span style="color:#000000;">;
}
</span><span style="color:#0000ff;">if</span><span style="color:#000000;">(y){
el.style.top </span>= t + 'px'<span style="color:#000000;">;
}
</span><span style="color:#0000ff;">if</span>(x&&y || (!x&&!<span style="color:#000000;">y)){
el.style.left </span>= l + 'px'<span style="color:#000000;">;
el.style.top </span>= t + 'px'<span style="color:#000000;">;
}
}
}
</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> up(e){
document.removeEventListener(</span>"mousemove"<span style="color:#000000;">,move);
document.removeEventListener(</span>"mouseup"<span style="color:#000000;">,up);
}
})
</span><span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
el:</span>"#app"<span style="color:#000000;">,
data:{
flag:</span><span style="color:#0000ff;">true</span><span style="color:#000000;">,
msg:</span>"123"<span style="color:#000000;">
}
})
</span> 転載先:https://www.cnblogs.com/r-mp/p/11224156.html