拖拽有两种,一个是利用h5的拖拽属性 drag 实现,另一种是利用鼠标 按下-移动-抬起 事件模拟实现。
1、h5拖拽
function myDrag(el){
var disX,disY,left,top;
el.draggable = true;
el.ondragstart=function(e){
disX = e.clientX;
disY = e.clientY;
left = parseInt(window.getComputedStyle(el).marginLeft);
top = parseInt(window.getComputedStyle(el).marginTop);
}
el.ondrag=function(e){
//通过事件委托,计算移动的距离
//这里注意判断x,y大于0,因为拖拽结束,会有一次移动,x,y值小于0
if(e.clientX>0 || e.clientY>0){
var l = e.clientX - disX;
var t = e.clientY - disY;
//移动当前元素
el.style.marginLeft = left + l + 'px';
el.style.marginTop = top + t + 'px';
}
}
el.ondragend=function(e){
//console.log('dragend')
}
}
2、使用鼠标事件模拟拖拽
function myDrag(el){
el.draggable = false
el.onmousedown = function (e) {
//鼠标按下,计算当前元素距离可视区的距离
let disX = e.clientX;
let disY = e.clientY;
let left = parseInt(window.getComputedStyle(el).marginLeft);
let top = parseInt(window.getComputedStyle(el).marginTop);
document.onmousemove = function (e) {
//通过事件委托,计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
//移动当前元素
el.style.marginLeft = left + l + 'px';
el.style.marginTop = top + t + 'px';
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
vue 自定义拖拽指令,改变父元素位置
场景:一个面板,包含标题及内容部分,拖拽标题,实现面板移动
//html 部分
<div class='myPanel'>
<div class='title' v-drag></div>
<div class='content'></div>
</div>
//指令实现
Vue.directive('drag',//自定义指令
{bind:function (el, binding, vnode) {
el.draggable = false
el.onmousedown = function (e) {
el.parentNode.draggable = false
//鼠标按下,计算当前元素距离可视区的距离
let disX = e.clientX;
let disY = e.clientY;
let left = parseInt(window.getComputedStyle(el.parentNode).marginLeft);
let top = parseInt(window.getComputedStyle(el.parentNode).marginTop);
document.onmousemove = function (e) {
//通过事件委托,计算移动的距离
let l = e.clientX - disX;
let t = e.clientY - disY;
//改变父元素margin属性
el.parentNode.style.marginLeft = left + l + 'px';
el.parentNode.style.marginTop = top + t + 'px';
//回调接口
binding.value(l,t);
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
}
);