Web: Files: fixed drag
This commit is contained in:
parent
22cd73ddd2
commit
b89e232e59
@ -103,6 +103,7 @@ const SimpleFilesRow = (props) => {
|
|||||||
setThirdpartyInfo,
|
setThirdpartyInfo,
|
||||||
setMediaViewerData,
|
setMediaViewerData,
|
||||||
setDragging,
|
setDragging,
|
||||||
|
setStartDrag,
|
||||||
startUpload,
|
startUpload,
|
||||||
onSelectItem,
|
onSelectItem,
|
||||||
history,
|
history,
|
||||||
@ -498,8 +499,7 @@ const SimpleFilesRow = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setTooltipPosition(e.pageX, e.pageY);
|
setTooltipPosition(e.pageX, e.pageY);
|
||||||
document.body.classList.add("drag-cursor");
|
setStartDrag(true);
|
||||||
setDragging(true);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const isMobile = sectionWidth < 500;
|
const isMobile = sectionWidth < 500;
|
||||||
@ -588,6 +588,7 @@ export default inject(
|
|||||||
fileActionStore,
|
fileActionStore,
|
||||||
dragging,
|
dragging,
|
||||||
setDragging,
|
setDragging,
|
||||||
|
setStartDrag,
|
||||||
setTooltipPosition,
|
setTooltipPosition,
|
||||||
} = filesStore;
|
} = filesStore;
|
||||||
|
|
||||||
@ -656,6 +657,7 @@ export default inject(
|
|||||||
setMediaViewerData,
|
setMediaViewerData,
|
||||||
selectedFolderId,
|
selectedFolderId,
|
||||||
setDragging,
|
setDragging,
|
||||||
|
setStartDrag,
|
||||||
startUpload,
|
startUpload,
|
||||||
onSelectItem,
|
onSelectItem,
|
||||||
setTooltipPosition,
|
setTooltipPosition,
|
||||||
|
@ -21,6 +21,8 @@ const SectionBodyContent = (props) => {
|
|||||||
folderId,
|
folderId,
|
||||||
dragging,
|
dragging,
|
||||||
setDragging,
|
setDragging,
|
||||||
|
startDrag,
|
||||||
|
setStartDrag,
|
||||||
setTooltipPosition,
|
setTooltipPosition,
|
||||||
isRecycleBinFolder,
|
isRecycleBinFolder,
|
||||||
moveDragItems,
|
moveDragItems,
|
||||||
@ -35,8 +37,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);
|
||||||
@ -49,10 +51,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) {
|
||||||
|
document.body.classList.add("drag-cursor");
|
||||||
|
setDragging(true);
|
||||||
|
}
|
||||||
|
|
||||||
setTooltipPosition(e.pageX, e.pageY);
|
setTooltipPosition(e.pageX, e.pageY);
|
||||||
|
|
||||||
@ -95,11 +100,14 @@ 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;
|
||||||
|
|
||||||
|
setStartDrag(false);
|
||||||
setDragging(false);
|
setDragging(false);
|
||||||
onMoveTo(folderId);
|
onMoveTo(folderId);
|
||||||
return;
|
return;
|
||||||
@ -156,6 +164,8 @@ export default inject(
|
|||||||
filesList,
|
filesList,
|
||||||
dragging,
|
dragging,
|
||||||
setDragging,
|
setDragging,
|
||||||
|
startDrag,
|
||||||
|
setStartDrag,
|
||||||
isLoading,
|
isLoading,
|
||||||
viewAs,
|
viewAs,
|
||||||
setTooltipPosition,
|
setTooltipPosition,
|
||||||
@ -169,6 +179,8 @@ export default inject(
|
|||||||
isLoading,
|
isLoading,
|
||||||
isEmptyFilesList: filesList.length <= 0,
|
isEmptyFilesList: filesList.length <= 0,
|
||||||
setDragging,
|
setDragging,
|
||||||
|
startDrag,
|
||||||
|
setStartDrag,
|
||||||
folderId: selectedFolderStore.id,
|
folderId: selectedFolderStore.id,
|
||||||
setTooltipPosition,
|
setTooltipPosition,
|
||||||
isRecycleBinFolder: treeFoldersStore.isRecycleBinFolder,
|
isRecycleBinFolder: treeFoldersStore.isRecycleBinFolder,
|
||||||
|
@ -33,6 +33,7 @@ class FilesStore {
|
|||||||
|
|
||||||
tooltipPageX = 0;
|
tooltipPageX = 0;
|
||||||
tooltipPageY = 0;
|
tooltipPageY = 0;
|
||||||
|
startDrag = false;
|
||||||
|
|
||||||
firstLoad = true;
|
firstLoad = true;
|
||||||
files = [];
|
files = [];
|
||||||
@ -85,6 +86,10 @@ class FilesStore {
|
|||||||
this.tooltipPageY = tooltipPageY;
|
this.tooltipPageY = tooltipPageY;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
setStartDrag = (startDrag) => {
|
||||||
|
this.startDrag = startDrag;
|
||||||
|
};
|
||||||
|
|
||||||
get tooltipValue() {
|
get tooltipValue() {
|
||||||
if (!this.dragging) return null;
|
if (!this.dragging) return null;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user