96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
|
import './drag.css';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
bind(el, { name, value }, vnode) {
|
||
|
|
switch (name) {
|
||
|
|
case 'drag': {
|
||
|
|
if (['left', 'right', 'top', 'bottom'].indexOf(value) == -1) return;
|
||
|
|
// 创建边框子元素
|
||
|
|
const border = document.createElement('div');
|
||
|
|
border.classList.add("pseudo-border");
|
||
|
|
el.appendChild(border);
|
||
|
|
// 添加拖拽样式
|
||
|
|
addDragStyle(el, value);
|
||
|
|
// 添加拖拽事件
|
||
|
|
addDragEvent(el, border);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// inserted()
|
||
|
|
// update()
|
||
|
|
// componentUpdated()
|
||
|
|
// unbind()
|
||
|
|
}
|
||
|
|
|
||
|
|
function addDragEvent(el, border, direction) {
|
||
|
|
// border.setAttribute('draggable', true)
|
||
|
|
const onMouseMove = function (e) {
|
||
|
|
console.log('move', e);
|
||
|
|
}
|
||
|
|
const onMouseUp = function (e) {
|
||
|
|
console.log('up')
|
||
|
|
border.removeEventListener('mousemove', onMouseMove);
|
||
|
|
}
|
||
|
|
|
||
|
|
border.addEventListener('mousedown', function (e) {
|
||
|
|
console.log('down');
|
||
|
|
document.body.removeEventListener('mouseup', onMouseUp)
|
||
|
|
document.body.addEventListener('mouseup', onMouseUp)
|
||
|
|
border.addEventListener('mousemove', onMouseMove);
|
||
|
|
});
|
||
|
|
|
||
|
|
// TODO: 有点bug
|
||
|
|
|
||
|
|
// el.addEventListener('mousedown', function (e) {
|
||
|
|
// console.log('mousedown', e);
|
||
|
|
// const { clientX, clientY } = e;
|
||
|
|
// const { left, top, width, height } = el.getBoundingClientRect();
|
||
|
|
// const { offsetLeft, offsetTop } = el;
|
||
|
|
// const startX = clientX;
|
||
|
|
// const startY = clientY;
|
||
|
|
// const startLeft = left;
|
||
|
|
// const startTop = top;
|
||
|
|
// const startWidth = width;
|
||
|
|
// const startHeight = height;
|
||
|
|
// const startOffsetLeft = offsetLeft;
|
||
|
|
// const startOffsetTop = offsetTop;
|
||
|
|
// const move = function (e) {
|
||
|
|
// console.log('mousemove', e);
|
||
|
|
// const { clientX, clientY } = e;
|
||
|
|
// const offsetX = clientX - startX;
|
||
|
|
// const offsetY = clientY - startY;
|
||
|
|
// switch (direction) {
|
||
|
|
// case 'left': {
|
||
|
|
// el.style.left = startLeft + offsetX + 'px';
|
||
|
|
// el.style.width = startWidth - offsetX + 'px';
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// case 'right': {
|
||
|
|
// el.style.width = startWidth + offsetX + 'px';
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// case 'top': {
|
||
|
|
// el.style.top = startTop + offsetY + 'px';
|
||
|
|
// el.style.height = startHeight - offsetY + 'px';
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// case 'bottom': {
|
||
|
|
// el.style.height = startHeight + offsetY + 'px';
|
||
|
|
// break;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// const up = function (e) {
|
||
|
|
// console.log('mouseup', e);
|
||
|
|
// document.removeEventListener('mousemove', move);
|
||
|
|
// document.removeEventListener('mouseup', up);
|
||
|
|
// }
|
||
|
|
// document.addEventListener('mousemove', move);
|
||
|
|
// document.addEventListener('mouseup', up);
|
||
|
|
// });
|
||
|
|
}
|
||
|
|
|
||
|
|
function addDragStyle(el, direction) {
|
||
|
|
el.classList.add('v-drag-border-' + direction)
|
||
|
|
}
|