vueカスタム命令における移動端とpc端divのドラッグ動作
vueカスタムコマンドはとても興味深い存在で、とても便利な機能です.今日は急にdivを引っ張る機能をしたいと思って、直接書きたいと思っていました.vueファイルでは、実際にドラッグ&ドロップするのはdivのためだと考え、カスタムコマンドを思い浮かべます.
vue templateで
drag
新しいdrag.jsファイルこれはpc側のドラッグアップスキームです
dragMove
新しいdragMove.jsファイルこれはモバイル側のドラッグアップスキームです
vue templateで
import drag from '../assets/drag'
import dragMove from '../assets/dragMove'
drag
新しいdrag.jsファイルこれはpc側のドラッグアップスキームです
import Vue from 'vue'
Vue.directive('drag',{
bind:function (el) {
// document el
el.onmousedown = (event) => {
//
let pointX = event.clientX - el.offsetLeft;// X ( )
let pointY = event.clientY - el.offsetTop;// Y ( )
document.onmousemove = (e)=>{
// ,
let left = e.clientX - pointX;
let top = e.clientY - pointY;
//
el.style.left = left + 'px';
el.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
})
dragMove
新しいdragMove.jsファイルこれはモバイル側のドラッグアップスキームです
import Vue from 'vue'
Vue.directive('dragMove',{
bind: function (el, binding) {
var touch,disX,disY
el.ontouchstart = (e) => {
if(e.touches){// e e.touches[0]
touch = e.touches[0];
}else {
touch = e;
}
disX = touch.clientX - el.offsetLeft;// X ( )
disY = touch.clientY - el.offsetTop;// Y ( )
}
el.ontouchmove = (e)=>{
if(e.touches){// e e.touches[0]
touch = e.touches[0];
}else {
touch = e;
}
// ,
let left = touch.clientX - disX;
let top = touch.clientY - disY;
//
el.style.left = left + 'px';
el.style.top = top + 'px';
e.preventDefault();//
};
el.ontouchend = (e) => {
// el.ontouchmove = null;
// el.ontouchend = null;
};
}
})