20251222
This commit is contained in:
zuowei1216
64
AdminPanel/plugins/utils/drag/dom.js
Normal file
64
AdminPanel/plugins/utils/drag/dom.js
Normal file
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* 在指定节点前插入节点
|
||||
* @param {*} newElement
|
||||
* @param {*} targentElement
|
||||
*/
|
||||
export function insertBefore(newElement, targentElement) {
|
||||
targentElement.parentNode.insertBefore(newElement, targentElement)
|
||||
}
|
||||
|
||||
/**
|
||||
* 在指定节点后插入节点
|
||||
* @param {*} newNode
|
||||
* @param {*} referenceNode
|
||||
*/
|
||||
export function insertAfter(newNode, referenceNode) {
|
||||
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取元素上坐标
|
||||
* @param {*} e
|
||||
* @returns
|
||||
*/
|
||||
export function getTop(e) {
|
||||
var result = e.offsetTop;
|
||||
if (e.offsetParent != null)
|
||||
result += getTop(e.offsetParent);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取元素左坐标
|
||||
* @param {*} e
|
||||
* @returns
|
||||
*/
|
||||
export function getLeft(e) {
|
||||
var result = e.offsetLeft;
|
||||
if (e.offsetParent != null)
|
||||
result += getLeft(e.offsetParent);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取dom元素位置
|
||||
* @param {*} e
|
||||
* @returns
|
||||
*/
|
||||
export function getPosition(e) {
|
||||
var evt = e || event;
|
||||
return { x: evt.clientX, y: evt.clientY }
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置dom元素的位置 left top
|
||||
* @param {*} dom
|
||||
* @param {*} x
|
||||
* @param {*} y
|
||||
* @param {*} unit 后缀单位，默认px
|
||||
*/
|
||||
export function setPosition(dom, left, top, unit = 'px') {
|
||||
dom.style.left = left + unit;
|
||||
dom.style.top = top + unit;
|
||||
}
|
||||
174
AdminPanel/plugins/utils/drag/drag.js
Normal file
174
AdminPanel/plugins/utils/drag/drag.js
Normal file
@@ -0,0 +1,174 @@
|
||||
//引入操作dom元素的
|
||||
import { insertBefore, insertAfter, getTop, getLeft, getPosition, setPosition } from './dom.js'
|
||||
|
||||
class Drap {
|
||||
static status = {
|
||||
downIndex: null,
|
||||
upIndex: null,
|
||||
node: null,
|
||||
transparentNode: null,
|
||||
time: null,
|
||||
callback: null,
|
||||
styleWidth: null,
|
||||
styleHeight: null,
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标松开
|
||||
* @returns
|
||||
*/
|
||||
static onMouseUp() {
|
||||
Drap.status.time && clearTimeout(Drap.status.time);
|
||||
|
||||
let obj = Object.assign({}, Drap.status); //浅复制一份
|
||||
Drap.resetStatus(); //重置
|
||||
|
||||
if (obj.downIndex != null && obj.upIndex != null && obj.downIndex != obj.upIndex) {
|
||||
Drap.status.callback && Drap.status.callback(obj);
|
||||
Drap.status.callback = null;
|
||||
}
|
||||
|
||||
document.removeEventListener('mouseup', DragFolder.onMouseUp);
|
||||
document.removeEventListener('mousemove', DragFolder.onMouseMove);
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标移动
|
||||
* @param {*} e
|
||||
*/
|
||||
static onMouseMove(e) {
|
||||
let res = getPosition(e);
|
||||
setPosition(Drap.status.node, res.x, res.y);
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置状态
|
||||
* @returns
|
||||
*/
|
||||
static resetStatus() {
|
||||
if (Drap.status.downIndex == null)
|
||||
return;
|
||||
Drap.status.downIndex = null;
|
||||
Drap.status.upIndex = null;
|
||||
Drap.status.upIndex = null;
|
||||
Drap.status.time = null;
|
||||
|
||||
if (Drap.status.node != null) {
|
||||
Drap.status.node.style.width = Drap.status.styleWidth;
|
||||
Drap.status.node.style.height = Drap.status.styleHeight;
|
||||
Drap.status.node.style.position = "static";
|
||||
}
|
||||
|
||||
|
||||
Drap.status.transparentNode && Drap.status.transparentNode.remove();
|
||||
Drap.status.transparentNode = null;
|
||||
}
|
||||
|
||||
constructor(el, option = {}) {
|
||||
let config = {
|
||||
direction: 'x', //默认配置 左右方向
|
||||
callback: null,
|
||||
}
|
||||
Object.assign(config, option);
|
||||
this.option = config;
|
||||
|
||||
this.el = el;
|
||||
this.downTime = 300;
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
init() {
|
||||
// console.log(this.option);
|
||||
this.el.onmousedown = (e) => {
|
||||
this.onMouseDown(e)
|
||||
return false
|
||||
}
|
||||
|
||||
this.el.onmousemove = (e) => {
|
||||
this.onMouseMove(e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标按下事件
|
||||
* @param {*} e
|
||||
*/
|
||||
onMouseDown(e) {
|
||||
document.addEventListener('mouseup', Drap.onMouseUp);
|
||||
|
||||
Drap.status.time = setTimeout(() => {
|
||||
Drap.status.downIndex = this.option.index;
|
||||
Drap.status.node = this.el;
|
||||
Drap.status.transparentNode = this.el.cloneNode(true); //克隆节点
|
||||
Drap.status.callback = this.option.callback;
|
||||
|
||||
console.log(this.el.offsetWidth);
|
||||
|
||||
Drap.status.styleWidth = Drap.status.node.style.width;
|
||||
Drap.status.styleHeight = Drap.status.node.style.height;
|
||||
Drap.status.node.style.width = this.el.offsetWidth + "px";
|
||||
Drap.status.node.style.height = this.el.offsetHeight + "px"
|
||||
//处理节点显示
|
||||
Drap.status.node.style.position = "fixed";
|
||||
|
||||
|
||||
|
||||
Drap.status.transparentNode.style.cssText += ";opacity: 0;"
|
||||
insertBefore(Drap.status.transparentNode, this.el);
|
||||
|
||||
document.addEventListener('mousemove', Drap.onMouseMove);
|
||||
}, this.downTime);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 鼠标移动事件
|
||||
* @param {*} e
|
||||
* @returns
|
||||
*/
|
||||
onMouseMove(e) {
|
||||
if (Drap.status.downIndex == null)
|
||||
return false;
|
||||
|
||||
let left = getLeft(this.el) + this.el.offsetWidth / 2;
|
||||
let top = getTop(this.el) + this.el.offsetHeight / 2;
|
||||
|
||||
let obj = getPosition(e);
|
||||
let min = Drap.status.downIndex < this.option.index;
|
||||
|
||||
//左右方向进行拖拽
|
||||
Drap.status.upIndex = this.option.index;
|
||||
if (this.option.direction == 'x') {
|
||||
if (obj.x < left) {
|
||||
// console.log('左边');
|
||||
insertBefore(Drap.status.transparentNode, this.el)
|
||||
} else {
|
||||
// console.log('右边');
|
||||
insertAfter(Drap.status.transparentNode, this.el)
|
||||
Drap.status.upIndex += min ? 0 : 1; //按下大于松开的下标+1
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
//上下方向拖拽
|
||||
if (obj.y < top) {
|
||||
// console.log('上边');
|
||||
insertBefore(Drap.status.transparentNode, this.el);
|
||||
} else {
|
||||
// console.log('下边');
|
||||
insertAfter(Drap.status.transparentNode, this.el);
|
||||
Drap.status.upIndex += min ? 0 : 1; //按下大于松开的下标+1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//导出vue指令用到的对象
|
||||
export const drag = {
|
||||
mounted(el, binding) {
|
||||
new Drap(el, binding.value || {})
|
||||
}
|
||||
}
|
||||
203
AdminPanel/plugins/utils/drag/dragFileToFolder.js
Normal file
203
AdminPanel/plugins/utils/drag/dragFileToFolder.js
Normal file
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* 实现拖拽文件到文件夹
|
||||
*/
|
||||
import { getPosition, setPosition } from './dom.js'
|
||||
import { ipcSend } from "@/api/electronApi/ipc.js"
|
||||
|
||||
let g_time = null;
|
||||
let g_div = null;
|
||||
let g_foldersElement = [];//所有文件夹的dom元素
|
||||
let g_selectId = 'g_selectId';
|
||||
let g_moveCssTest = '';//css样式
|
||||
let g_callback = null;
|
||||
/**
|
||||
* 开启拖拽
|
||||
* @param {Array} folderIds 所有文件夹的id数组，需要通过获取文件夹单个的id开启拖移入移出事件
|
||||
* @param {String} imgPath 预览图片的路径地址
|
||||
* @param {Int} number 拖动的数量
|
||||
* @param {Function} endCallback 回调函数，返回null || id
|
||||
*/
|
||||
export function startDragFileToFolder(e, folderIds, imgPath, number, endCallback, readyCallback) {
|
||||
|
||||
const downTime = 200;
|
||||
// document.addEventListener('mouseup', mouseUp, true);//绑定鼠标松开事件
|
||||
|
||||
g_time = setTimeout(() => {
|
||||
// console.log('dragFileToFolder=>绑定事件');
|
||||
// readyCallback && readyCallback();//准备
|
||||
// createPreviewElement(imgPath, number);
|
||||
|
||||
// mouseMove(e)
|
||||
ipcSend('ondragstart', imgPath)
|
||||
|
||||
// addFolderEvent(folderIds);
|
||||
// g_callback = endCallback;
|
||||
// document.addEventListener('mousemove', mouseMove, true);//绑定鼠标松开事件
|
||||
}, downTime);
|
||||
}
|
||||
// export function startDragFileToFolder(e, folderIds, imgPath, number, endCallback, readyCallback) {
|
||||
|
||||
// const downTime = 200;
|
||||
// document.addEventListener('mouseup', mouseUp, true);//绑定鼠标松开事件
|
||||
|
||||
// g_time = setTimeout(() => {
|
||||
// console.log('dragFileToFolder=>绑定事件');
|
||||
// readyCallback && readyCallback();//准备
|
||||
// createPreviewElement(imgPath, number);
|
||||
|
||||
// // mouseMove(e)
|
||||
// ipcSend('ondragstart',imgPath)
|
||||
|
||||
// addFolderEvent(folderIds);
|
||||
// g_callback = endCallback;
|
||||
// document.addEventListener('mousemove', mouseMove, true);//绑定鼠标松开事件
|
||||
// }, downTime);
|
||||
// }
|
||||
|
||||
/**
|
||||
* 鼠标拖动的处理事件
|
||||
* @param {*} params
|
||||
*/
|
||||
function mouseMove(e) {
|
||||
console.log('dragFileToFolder=>拖动');
|
||||
let res = getPosition(e);
|
||||
setPosition(g_div, res.x + 4, res.y + 4);
|
||||
}
|
||||
|
||||
/**
|
||||
* 松开鼠标的处理事件
|
||||
*/
|
||||
function mouseUp() {
|
||||
if (g_time)
|
||||
clearTimeout(g_time);
|
||||
|
||||
clearPreviewElement();//清除节点
|
||||
removeFolderEvent();//清除所有文件夹元素的事件
|
||||
document.removeEventListener('mouseup', mouseUp, true);
|
||||
document.removeEventListener('mousemove', mouseMove, true);
|
||||
console.log('dragFileToFolder=>取消绑定');
|
||||
|
||||
if (g_selectId) {
|
||||
console.log('最终id:', g_selectId);
|
||||
if (g_selectId.style)
|
||||
g_selectId.style.cssText = g_moveCssTest;
|
||||
|
||||
const idText = '#leftFolderItem';
|
||||
if (g_selectId.id)
|
||||
g_callback && g_callback(g_selectId.id.replace(idText, ''))
|
||||
g_selectId = null;
|
||||
}
|
||||
g_callback = null;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 创建预览元素
|
||||
*/
|
||||
function createPreviewElement(imgPath, number) {
|
||||
if (g_div != null)
|
||||
return;
|
||||
g_div = document.createElement('div');
|
||||
let img = document.createElement('img');
|
||||
img.src = imgPath;
|
||||
|
||||
g_div.appendChild(img);
|
||||
Object.assign(img.style, {
|
||||
maxWidth: '100px',
|
||||
maxHeight: '100px',
|
||||
border: '2px solid #2a98ff',
|
||||
borderRadius: '4px'
|
||||
})
|
||||
|
||||
Object.assign(g_div.style, {
|
||||
position: 'fixed',
|
||||
zIndex: 10011,
|
||||
left: '-1000px',
|
||||
})
|
||||
|
||||
g_div.appendChild(createTextElement(number));
|
||||
document.body.appendChild(g_div);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建文件数量的样式
|
||||
* @param {*} number
|
||||
* @returns
|
||||
*/
|
||||
function createTextElement(number) {
|
||||
let dom = document.createElement('div');
|
||||
dom.innerHTML = number;
|
||||
let style = {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
lineHeight: '24px',
|
||||
borderRadius: '100%',
|
||||
background: "#D84A4A",
|
||||
color: '#fff',
|
||||
fontSize: '12px',
|
||||
position: "absolute",
|
||||
top: '-12px',
|
||||
right: '-12px',
|
||||
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.3)',
|
||||
textAlign: 'center'
|
||||
}
|
||||
Object.assign(dom.style, style);
|
||||
return dom;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除创建的元素
|
||||
*/
|
||||
function clearPreviewElement() {
|
||||
if (g_div) {
|
||||
g_div.remove();
|
||||
g_div = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function mouseover(e) {
|
||||
console.log('移入', e);
|
||||
let el = e.target;
|
||||
if (el.id == '')
|
||||
el = el.parentNode;
|
||||
g_selectId = el;
|
||||
g_moveCssTest = el.style.cssText
|
||||
el.style.border = '1px solid #2a98ff';
|
||||
el.style.background = 'rgba(42,152,255,0.2)';
|
||||
}
|
||||
|
||||
function mouseout(e) {
|
||||
let el = e.target;
|
||||
if (el.id == '') {
|
||||
el = el.parentNode;
|
||||
}
|
||||
console.log('移出', el);
|
||||
g_selectId = null;
|
||||
// let el = e.target;
|
||||
el.style.cssText = g_moveCssTest;
|
||||
}
|
||||
|
||||
/**
|
||||
* 给文件夹id添加关联事件
|
||||
* @param {Array} ids 所有文件夹id
|
||||
*/
|
||||
function addFolderEvent(ids) {
|
||||
const idText = '#leftFolderItem';
|
||||
|
||||
g_foldersElement = ids.map(id => document.getElementById(idText + id)).filter(el => el)
|
||||
g_foldersElement.forEach(el => {
|
||||
el.addEventListener('mouseover', mouseover);//鼠标移入
|
||||
el.addEventListener('mouseout', mouseout);//鼠标移出事件
|
||||
})
|
||||
}
|
||||
|
||||
function removeFolderEvent(params) {
|
||||
if (g_foldersElement.length > 0) {
|
||||
g_foldersElement.forEach(el => {
|
||||
el.removeEventListener('mouseover', mouseover);//鼠标移入
|
||||
el.removeEventListener('mouseout', mouseout);//鼠标移出事件
|
||||
})
|
||||
g_foldersElement.splice(0, g_foldersElement.length);
|
||||
}
|
||||
}
|
||||
68
AdminPanel/plugins/utils/drag/dragFileToImage.js
Normal file
68
AdminPanel/plugins/utils/drag/dragFileToImage.js
Normal file
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* 拖拽文件时，创建一个临时的预览图
|
||||
*/
|
||||
import { nodeFs, getOsPrefix } from "@/utils/nodeFs"
|
||||
import g_config from "@/api/config/index";
|
||||
/**
|
||||
* 通过canvas将svg转成png
|
||||
* @param {*} path 路径
|
||||
* @returns 返回base64字符串
|
||||
*/
|
||||
export function dragFile2png(path, number) {
|
||||
// debugger
|
||||
let outPath = g_config.path.dragPreview;
|
||||
console.log(path, outPath);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
var img = new Image();
|
||||
img.src = getOsPrefix() + path;
|
||||
img.onload = () => {
|
||||
var canvas = document.createElement('canvas');
|
||||
var c = canvas.getContext('2d');
|
||||
|
||||
let width, height;
|
||||
let scale = img.width / 100;
|
||||
if (img.width > img.height) {
|
||||
width = 100;
|
||||
height = img.height / scale;
|
||||
} else {
|
||||
scale = img.height / 100;
|
||||
height = 100;
|
||||
width = img.width / scale;
|
||||
}
|
||||
|
||||
|
||||
canvas.width = width + 20;
|
||||
canvas.height = height + 10;
|
||||
//canvas画图片
|
||||
c.drawImage(img, 10, 10, width, height);
|
||||
c.strokeStyle = "#2961d9";
|
||||
c.lineWidth = 2;
|
||||
c.strokeRect(10, 10, width, height);
|
||||
|
||||
if (number > 1) {
|
||||
c.beginPath();
|
||||
c.arc(width + 10, 10, 10, 0, Math.PI * 2, true);
|
||||
c.closePath();
|
||||
c.fillStyle = "rgba(255,0,0,1)";
|
||||
c.fill();
|
||||
|
||||
c.fillStyle = "#fff";//文字的颜色
|
||||
c.textAlign = 'center';//对齐方式
|
||||
// c.font = '13px "微软雅黑"';
|
||||
c.fillText(number, width + 10, 13);
|
||||
}
|
||||
|
||||
|
||||
//将图片添加到body中
|
||||
// console.log('转png', canvas.toDataURL('image/png'));
|
||||
let base64 = canvas.toDataURL('image/png')
|
||||
let temp = nodeFs.sync.writeBase64(outPath, base64.split('base64,')[1]);
|
||||
temp.err == 1 ? reject(temp.msg) : resolve({ outPath });
|
||||
}
|
||||
|
||||
img.onerror = (err) => {
|
||||
reject(err);//转换失败
|
||||
}
|
||||
})
|
||||
}
|
||||
230
AdminPanel/plugins/utils/drag/dragFolder.js
Normal file
230
AdminPanel/plugins/utils/drag/dragFolder.js
Normal file
@@ -0,0 +1,230 @@
|
||||
//引入操作dom元素的
|
||||
import { insertBefore, getTop, getPosition, setPosition } from './dom.js'
|
||||
|
||||
export class DragFolder {
|
||||
static status = {
|
||||
downIndex: null,
|
||||
upIndex: null,
|
||||
node: null,
|
||||
transparentNode: null,
|
||||
moveNode: null,
|
||||
moveCssTest: null,
|
||||
time: null,
|
||||
callback: null,
|
||||
cssText: null,
|
||||
position: null,
|
||||
multipleChoice: null,//多选样式节点
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标松开
|
||||
* @returns
|
||||
*/
|
||||
static onMouseUp() {
|
||||
DragFolder.status.time && clearTimeout(DragFolder.status.time);
|
||||
|
||||
if (DragFolder.status.moveNode != null) {
|
||||
DragFolder.status.moveNode.style.cssText = DragFolder.status.moveCssTest;
|
||||
DragFolder.status.moveNode = null;
|
||||
}
|
||||
|
||||
// let obj = Object.assign({}, DragFolder.status); //浅复制一份
|
||||
let downIndex = DragFolder.status.downIndex;
|
||||
let upIndex = DragFolder.status.upIndex;
|
||||
let position = DragFolder.status.position;
|
||||
DragFolder.resetStatus(); //重置
|
||||
|
||||
console.log('拖拽松开');
|
||||
if (downIndex != null && upIndex != null && downIndex != upIndex) {
|
||||
DragFolder.status.callback && DragFolder.status.callback({ downIndex, upIndex, position });
|
||||
DragFolder.status.callback = null;
|
||||
}
|
||||
|
||||
document.removeEventListener('mouseup', DragFolder.onMouseUp);
|
||||
document.removeEventListener('mousemove', DragFolder.onMouseMove);
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标移动
|
||||
* @param {*} e
|
||||
*/
|
||||
static onMouseMove(e) {
|
||||
console.log('移动');
|
||||
let res = getPosition(e);
|
||||
setPosition(DragFolder.status.node, res.x + 4, res.y + 4);
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置状态
|
||||
* @returns
|
||||
*/
|
||||
static resetStatus() {
|
||||
if (DragFolder.status.downIndex == null)
|
||||
return;
|
||||
DragFolder.status.downIndex = null;
|
||||
DragFolder.status.upIndex = null;
|
||||
DragFolder.status.upIndex = null;
|
||||
DragFolder.status.time = null;
|
||||
|
||||
if (DragFolder.status.node != null) {
|
||||
DragFolder.status.node.style.cssText = DragFolder.status.cssText;
|
||||
DragFolder.status.node.style.position = "static";
|
||||
|
||||
}
|
||||
|
||||
if (DragFolder.status.transparentNode != null) {
|
||||
DragFolder.status.transparentNode.remove();
|
||||
DragFolder.status.transparentNode = null;
|
||||
}
|
||||
if (DragFolder.status.multipleChoice != null) {
|
||||
DragFolder.status.multipleChoice.remove();
|
||||
DragFolder.status.multipleChoice = null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
constructor(el, option = {}) {
|
||||
let config = {
|
||||
direction: 'x', //默认配置 左右方向
|
||||
callback: null,
|
||||
}
|
||||
Object.assign(config, option);
|
||||
this.option = config;
|
||||
|
||||
this.el = typeof el == 'string' ? document.getElementById(el) : el;
|
||||
|
||||
// console.log(this.el);
|
||||
this.downTime = 300;
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
init() {
|
||||
// console.log(this.option);
|
||||
|
||||
// debugger
|
||||
this.el.onmousedown = (e) => {
|
||||
// debugger
|
||||
this.onMouseDown(e)
|
||||
// return false
|
||||
}
|
||||
|
||||
this.el.onmousemove = (e) => {
|
||||
this.onMouseMove(e);
|
||||
}
|
||||
// console.log('folder初始化', this.el,this.el.onmousedown);
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标按下事件
|
||||
* @param {*} e
|
||||
*/
|
||||
onMouseDown(e) {
|
||||
document.addEventListener('mouseup', DragFolder.onMouseUp, true);
|
||||
|
||||
DragFolder.status.time = setTimeout(() => {
|
||||
DragFolder.status.downIndex = this.option.index;
|
||||
DragFolder.status.callback = this.option.callback;
|
||||
|
||||
if (this.option.downCallback) {
|
||||
// debugger
|
||||
let temp = this.option.downCallback();
|
||||
|
||||
let select = temp.indexOf(this.option.index) > -1 ? temp : [this.option.index];
|
||||
console.log(this.option.index,temp,select)
|
||||
//创建数量的提醒
|
||||
if (select.length > 1) {
|
||||
DragFolder.status.multipleChoice = document.createElement('div');
|
||||
DragFolder.status.multipleChoice.innerHTML = select.length;
|
||||
let style = {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
lineHeight: '24px',
|
||||
borderRadius: '100%',
|
||||
background: "#D84A4A",
|
||||
color: '#fff',
|
||||
fontSize: '12px',
|
||||
position: "absolute",
|
||||
top: '-12px',
|
||||
right: '-12px',
|
||||
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.3)',
|
||||
textAlign: 'center'
|
||||
}
|
||||
Object.assign(DragFolder.status.multipleChoice.style, style)
|
||||
}
|
||||
console.error('按下回调', select);
|
||||
}
|
||||
|
||||
DragFolder.status.node = this.el;
|
||||
DragFolder.status.transparentNode = this.el.cloneNode(true); //克隆节点
|
||||
// DragFolder.status.node = this.el.cloneNode(true); //克隆节点
|
||||
|
||||
console.log(this.el.offsetWidth);
|
||||
|
||||
DragFolder.status.cssText = DragFolder.status.node.style.cssText;
|
||||
DragFolder.status.node.style.width = this.el.offsetWidth + 4 + "px";
|
||||
DragFolder.status.node.style.height = this.el.offsetHeight + 4 + "px"
|
||||
|
||||
//处理节点显示
|
||||
DragFolder.status.node.style.position = "fixed";
|
||||
DragFolder.status.node.style.background = "#2a98ff";
|
||||
DragFolder.status.node.style.zIndex = "101";
|
||||
|
||||
DragFolder.status.transparentNode.style.cssText += ";border: 1px solid #797979"
|
||||
|
||||
DragFolder.status.multipleChoice && DragFolder.status.node.appendChild(DragFolder.status.multipleChoice)
|
||||
insertBefore(DragFolder.status.transparentNode, this.el);
|
||||
|
||||
document.addEventListener('mousemove', DragFolder.onMouseMove);
|
||||
}, this.downTime);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 鼠标移动事件
|
||||
* @param {*} e
|
||||
* @returns
|
||||
*/
|
||||
onMouseMove(e) {
|
||||
if (DragFolder.status.downIndex == null)
|
||||
return false;
|
||||
if (DragFolder.status.moveNode != null) {
|
||||
DragFolder.status.moveNode.style.cssText = DragFolder.status.moveCssTest;
|
||||
DragFolder.status.moveNode = null;
|
||||
}
|
||||
|
||||
DragFolder.status.moveNode = this.el;
|
||||
DragFolder.status.moveCssTest = this.el.style.cssText;
|
||||
|
||||
// let elTop = getTop(this.el)
|
||||
let elTop = this.el.getBoundingClientRect().top
|
||||
let top = elTop + this.el.offsetHeight / 10 * 3;
|
||||
let bottom = elTop + this.el.offsetHeight / 10 * 7;
|
||||
|
||||
let obj = getPosition(e);
|
||||
|
||||
//左右方向进行拖拽
|
||||
DragFolder.status.upIndex = this.option.index;
|
||||
|
||||
//上下方向拖拽
|
||||
if (obj.y < top) {
|
||||
this.el.style.borderTop = '1px solid #2a98ff';
|
||||
DragFolder.status.position = 'top'
|
||||
} else if (obj.y > bottom) {
|
||||
this.el.style.borderBottom = '1px solid #2a98ff'
|
||||
DragFolder.status.position = 'bottom'
|
||||
|
||||
} else {
|
||||
DragFolder.status.position = 'center'
|
||||
this.el.style.border = '1px solid #2a98ff';
|
||||
this.el.style.background = 'rgba(42,152,255,0.2)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default DragFolder;
|
||||
189
AdminPanel/plugins/utils/drag/dragtagToimage.ts
Normal file
189
AdminPanel/plugins/utils/drag/dragtagToimage.ts
Normal file
@@ -0,0 +1,189 @@
|
||||
|
||||
|
||||
//引入操作dom元素的
|
||||
import { insertBefore, getTop, getPosition, setPosition } from './dom.js'
|
||||
|
||||
interface IOption {
|
||||
index?:string,
|
||||
callback?:Function,
|
||||
downCallback?: Function,
|
||||
}
|
||||
|
||||
export class DragTag {
|
||||
public el: HTMLElement
|
||||
public option: IOption
|
||||
public downTime: number
|
||||
|
||||
static status = {
|
||||
node: null,
|
||||
transparentNode: null,
|
||||
moveNode: null,
|
||||
moveCssTest: null,
|
||||
time: null,
|
||||
callback: null,
|
||||
cssText: null,
|
||||
position: null,
|
||||
multipleChoice: null,//多选样式节点
|
||||
option: null
|
||||
}
|
||||
constructor(el, option = {}) {
|
||||
let config = {
|
||||
direction: 'x', //默认配置 左右方向
|
||||
callback: null,
|
||||
}
|
||||
Object.assign(config, option);
|
||||
this.option = config;
|
||||
|
||||
this.el = typeof el == 'string' ? document.getElementById(el) : el;
|
||||
|
||||
// console.log(this.el);
|
||||
this.downTime = 300;
|
||||
this.init();
|
||||
}
|
||||
/**
|
||||
* 鼠标松开
|
||||
* @returns
|
||||
*/
|
||||
static onMouseUp() {
|
||||
DragTag.status.time && clearTimeout(DragTag.status.time);
|
||||
|
||||
if (DragTag.status.moveNode != null) {
|
||||
DragTag.status.moveNode.style.cssText = DragTag.status.moveCssTest;
|
||||
DragTag.status.moveNode = null;
|
||||
}
|
||||
|
||||
|
||||
DragTag.resetStatus(); //重置
|
||||
|
||||
console.log('拖拽松开');
|
||||
DragTag.status.callback && DragTag.status.callback();
|
||||
|
||||
document.removeEventListener('mouseup', DragTag.onMouseUp);
|
||||
document.removeEventListener('mousemove', DragTag.onMouseMove);
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标移动
|
||||
* @param {*} e
|
||||
*/
|
||||
static onMouseMove(e) {
|
||||
console.log('移动');
|
||||
let res = getPosition(e);
|
||||
setPosition(DragTag.status.node, res.x + 4, res.y + 4);
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置状态
|
||||
* @returns
|
||||
*/
|
||||
static resetStatus() {
|
||||
|
||||
DragTag.status.time = null;
|
||||
|
||||
if (DragTag.status.node != null) {
|
||||
DragTag.status.node.style.cssText = DragTag.status.cssText;
|
||||
DragTag.status.node.style.position = "static";
|
||||
|
||||
}
|
||||
|
||||
if (DragTag.status.transparentNode != null) {
|
||||
DragTag.status.transparentNode.remove();
|
||||
DragTag.status.transparentNode = null;
|
||||
}
|
||||
if (DragTag.status.multipleChoice != null) {
|
||||
DragTag.status.multipleChoice.remove();
|
||||
DragTag.status.multipleChoice = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
init() {
|
||||
// console.log('初始化',this.el)
|
||||
this.el.onmousedown = (e) => {
|
||||
this.onMouseDown(e)
|
||||
}
|
||||
this.el.onmousemove = (e) => {
|
||||
this.onMouseMove(e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标按下事件
|
||||
* @param {*} e
|
||||
*/
|
||||
onMouseDown(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.button != 0) return
|
||||
console.log('按下', e.button)
|
||||
document.addEventListener('mouseup', DragTag.onMouseUp);
|
||||
DragTag.status.time = setTimeout(() => {
|
||||
DragTag.status.callback = this.option.callback;
|
||||
if (this.option.downCallback) {
|
||||
// debugger
|
||||
let temp = this.option.downCallback(this.option.index);
|
||||
let select = temp.indexOf(this.option.index) > -1 ? temp : [this.option.index];
|
||||
console.log(this.option.index, select)
|
||||
//创建数量的提醒
|
||||
if (select.length > 1) {
|
||||
DragTag.status.multipleChoice = document.createElement('div');
|
||||
DragTag.status.multipleChoice.innerHTML = select.length;
|
||||
let style = {
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
lineHeight: '14px',
|
||||
borderRadius: '100%',
|
||||
background: "#6450FF",
|
||||
color: '#fff',
|
||||
fontSize: '10px',
|
||||
position: "absolute",
|
||||
top: '-10px',
|
||||
right: '0px',
|
||||
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.3)',
|
||||
textAlign: 'center'
|
||||
}
|
||||
Object.assign(DragTag.status.multipleChoice.style, style)
|
||||
}
|
||||
// console.error('按下回调',select);
|
||||
}
|
||||
|
||||
DragTag.status.node = this.el;
|
||||
DragTag.status.transparentNode = this.el.cloneNode(true); //克隆节点
|
||||
// DragTag.status.node = this.el.cloneNode(true); //克隆节点
|
||||
|
||||
|
||||
|
||||
DragTag.status.cssText = DragTag.status.node.style.cssText;
|
||||
DragTag.status.node.style.width = this.el.offsetWidth + 4 + "px";
|
||||
DragTag.status.node.style.height = this.el.offsetHeight + 4 + "px"
|
||||
|
||||
//处理节点显示
|
||||
DragTag.status.node.style.position = "fixed";
|
||||
DragTag.status.node.style.background = "#8070FF";
|
||||
DragTag.status.node.style.zIndex = "101";
|
||||
|
||||
let res = getPosition(e);
|
||||
setPosition(DragTag.status.node, res.x + 4, res.y + 4);
|
||||
|
||||
DragTag.status.multipleChoice && DragTag.status.node.appendChild(DragTag.status.multipleChoice)
|
||||
insertBefore(DragTag.status.transparentNode, this.el);
|
||||
document.addEventListener('mousemove', DragTag.onMouseMove);
|
||||
}, this.downTime);
|
||||
}
|
||||
|
||||
/**
|
||||
* 鼠标移动事件
|
||||
* @param {*} e
|
||||
* @returns
|
||||
*/
|
||||
onMouseMove(e) {
|
||||
|
||||
}
|
||||
}
|
||||
export default DragTag;
|
||||
Reference in New Issue
Block a user