Web: Files: fixed drag
This commit is contained in:
parent
ffb4405a1a
commit
300c064556
@ -39,6 +39,7 @@ const FileItem = (props) => {
|
|||||||
selectedFolderId,
|
selectedFolderId,
|
||||||
setSharingPanelVisible,
|
setSharingPanelVisible,
|
||||||
setDragging,
|
setDragging,
|
||||||
|
setStartDrag,
|
||||||
startUpload,
|
startUpload,
|
||||||
viewAs,
|
viewAs,
|
||||||
setTooltipPosition,
|
setTooltipPosition,
|
||||||
@ -149,8 +150,7 @@ const FileItem = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setTooltipPosition(e.pageX, e.pageY);
|
setTooltipPosition(e.pageX, e.pageY);
|
||||||
document.body.classList.add("drag-cursor");
|
setStartDrag(true);
|
||||||
setDragging(true);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
let value = fileExst ? `file_${id}` : `folder_${id}`;
|
let value = fileExst ? `file_${id}` : `folder_${id}`;
|
||||||
@ -239,7 +239,12 @@ export default inject(
|
|||||||
},
|
},
|
||||||
{ item }
|
{ item }
|
||||||
) => {
|
) => {
|
||||||
const { dragging, setDragging, setTooltipPosition } = initFilesStore;
|
const {
|
||||||
|
dragging,
|
||||||
|
setDragging,
|
||||||
|
setStartDrag,
|
||||||
|
setTooltipPosition,
|
||||||
|
} = initFilesStore;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
type: actionType,
|
type: actionType,
|
||||||
@ -296,6 +301,7 @@ export default inject(
|
|||||||
selectRowAction,
|
selectRowAction,
|
||||||
selectedFolderId,
|
selectedFolderId,
|
||||||
setDragging,
|
setDragging,
|
||||||
|
setStartDrag,
|
||||||
startUpload,
|
startUpload,
|
||||||
onSelectItem,
|
onSelectItem,
|
||||||
getContextOptions,
|
getContextOptions,
|
||||||
|
@ -19,6 +19,8 @@ const SectionBodyContent = (props) => {
|
|||||||
isEmptyFilesList,
|
isEmptyFilesList,
|
||||||
folderId,
|
folderId,
|
||||||
dragging,
|
dragging,
|
||||||
|
startDrag,
|
||||||
|
setStartDrag,
|
||||||
setDragging,
|
setDragging,
|
||||||
setTooltipPosition,
|
setTooltipPosition,
|
||||||
isRecycleBinFolder,
|
isRecycleBinFolder,
|
||||||
@ -34,8 +36,8 @@ const SectionBodyContent = (props) => {
|
|||||||
customScrollElm && customScrollElm.scrollTo(0, 0);
|
customScrollElm && customScrollElm.scrollTo(0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
dragging && window.addEventListener("mouseup", onMouseUp);
|
startDrag && window.addEventListener("mouseup", onMouseUp);
|
||||||
dragging && document.addEventListener("mousemove", onMouseMove);
|
startDrag && document.addEventListener("mousemove", onMouseMove);
|
||||||
|
|
||||||
document.addEventListener("dragover", onDragOver);
|
document.addEventListener("dragover", onDragOver);
|
||||||
document.addEventListener("dragleave", onDragLeaveDoc);
|
document.addEventListener("dragleave", onDragLeaveDoc);
|
||||||
@ -48,10 +50,13 @@ const SectionBodyContent = (props) => {
|
|||||||
document.removeEventListener("dragleave", onDragLeaveDoc);
|
document.removeEventListener("dragleave", onDragLeaveDoc);
|
||||||
document.removeEventListener("drop", onDropEvent);
|
document.removeEventListener("drop", onDropEvent);
|
||||||
};
|
};
|
||||||
}, [onMouseUp, onMouseMove, dragging, folderId]);
|
}, [onMouseUp, onMouseMove, startDrag, folderId]);
|
||||||
|
|
||||||
const onMouseMove = (e) => {
|
const onMouseMove = (e) => {
|
||||||
!dragging && setDragging(true);
|
if (!dragging) {
|
||||||
|
setDragging(true);
|
||||||
|
document.body.classList.add("drag-cursor");
|
||||||
|
}
|
||||||
|
|
||||||
setTooltipPosition(e.pageX, e.pageY);
|
setTooltipPosition(e.pageX, e.pageY);
|
||||||
|
|
||||||
@ -94,12 +99,15 @@ const SectionBodyContent = (props) => {
|
|||||||
const elem = e.target.closest(".droppable");
|
const elem = e.target.closest(".droppable");
|
||||||
const value = elem && elem.getAttribute("value");
|
const value = elem && elem.getAttribute("value");
|
||||||
if ((!value && !treeValue) || isRecycleBinFolder) {
|
if ((!value && !treeValue) || isRecycleBinFolder) {
|
||||||
return setDragging(false);
|
setDragging(false);
|
||||||
|
setStartDrag(false);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const folderId = value ? value.split("_")[1] : treeValue;
|
const folderId = value ? value.split("_")[1] : treeValue;
|
||||||
|
|
||||||
setDragging(false);
|
setDragging(false);
|
||||||
|
setStartDrag(false);
|
||||||
onMoveTo(folderId);
|
onMoveTo(folderId);
|
||||||
return;
|
return;
|
||||||
};
|
};
|
||||||
@ -154,11 +162,15 @@ export default inject(
|
|||||||
isLoading,
|
isLoading,
|
||||||
viewAs,
|
viewAs,
|
||||||
setTooltipPosition,
|
setTooltipPosition,
|
||||||
|
startDrag,
|
||||||
|
setStartDrag,
|
||||||
} = initFilesStore;
|
} = initFilesStore;
|
||||||
const { firstLoad, fileActionStore, filesList } = filesStore;
|
const { firstLoad, fileActionStore, filesList } = filesStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
dragging,
|
dragging,
|
||||||
|
startDrag,
|
||||||
|
setStartDrag,
|
||||||
fileActionId: fileActionStore.id,
|
fileActionId: fileActionStore.id,
|
||||||
firstLoad,
|
firstLoad,
|
||||||
viewAs,
|
viewAs,
|
||||||
|
@ -18,6 +18,7 @@ class InitFilesStore {
|
|||||||
|
|
||||||
tooltipPageX = 0;
|
tooltipPageX = 0;
|
||||||
tooltipPageY = 0;
|
tooltipPageY = 0;
|
||||||
|
startDrag = false;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
const pathname = window.location.pathname.toLowerCase();
|
const pathname = window.location.pathname.toLowerCase();
|
||||||
@ -42,6 +43,10 @@ class InitFilesStore {
|
|||||||
this.isLoading = isLoading;
|
this.isLoading = isLoading;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setStartDrag = (startDrag) => {
|
||||||
|
this.startDrag = startDrag;
|
||||||
|
};
|
||||||
|
|
||||||
setTooltipPosition = (tooltipPageX, tooltipPageY) => {
|
setTooltipPosition = (tooltipPageX, tooltipPageY) => {
|
||||||
this.tooltipPageX = tooltipPageX;
|
this.tooltipPageX = tooltipPageX;
|
||||||
this.tooltipPageY = tooltipPageY;
|
this.tooltipPageY = tooltipPageY;
|
||||||
|
Loading…
Reference in New Issue
Block a user