|
@@ -400,3 +400,36 @@ export const hexToRgba = (hex, alpha) => {
|
|
|
// 返回 RGBA 字符串
|
|
|
return `rgba(${r}, ${g}, ${b}, ${alpha || 1})`;
|
|
|
};
|
|
|
+
|
|
|
+export const initDrag = (el, scaleX = 1, scaleY = 1) => {
|
|
|
+ if (!el) return;
|
|
|
+ el.style.position = 'fixed';
|
|
|
+ el.style.cursor = 'move';
|
|
|
+
|
|
|
+ const dragDom = el;
|
|
|
+
|
|
|
+ let disX = 0; // 鼠标按下时,鼠标与拖拽元素的左边距
|
|
|
+ let disY = 0; // 鼠标按下时,鼠标与拖拽元素的上边距
|
|
|
+
|
|
|
+ dragDom.onmousedown = (e) => {
|
|
|
+ // 鼠标按下,计算当前元素距离可视区的距离
|
|
|
+ disX = e.clientX / scaleX - dragDom.offsetLeft;
|
|
|
+ disY = e.clientY / scaleY - dragDom.offsetTop;
|
|
|
+
|
|
|
+ // 鼠标移动事件
|
|
|
+ document.onmousemove = function (e) {
|
|
|
+ // 通过事件委托,计算移动的距离
|
|
|
+ const l = e.clientX / scaleX - disX;
|
|
|
+ const t = e.clientY / scaleY - disY;
|
|
|
+ // 移动当前元素
|
|
|
+ dragDom.style.left = `${l + 'px'}`;
|
|
|
+ dragDom.style.top = `${t + 'px'}`;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 鼠标松开事件
|
|
|
+ document.onmouseup = function () {
|
|
|
+ document.onmousemove = null;
|
|
|
+ document.onmouseup = null;
|
|
|
+ };
|
|
|
+ };
|
|
|
+};
|