diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index f41be55efe..b75d92e7ef 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -343,7 +343,7 @@ class DirentListItem extends React.Component {
onItemDragStart = (e) => {
let nodeRootPath = '';
- nodeRootPath = this.props.path === '/' ? `${this.props.path}${this.props.dirent.name}` : this.props.path;
+ nodeRootPath = this.props.path === '/' ? `${this.props.path}${this.props.dirent.name}` : `${this.props.path}/${this.props.dirent.name}`;
let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath};
dragStartItemData = JSON.stringify(dragStartItemData);
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index 5d824fb659..39bb93e494 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -65,6 +65,7 @@ class DirentListView extends React.Component {
progress: 0,
isMutipleOperation: true,
activeDirent: null,
+ isListDropTipShow: false,
};
this.isRepoOwner = props.currentRepoInfo.owner_email === username;
@@ -525,6 +526,42 @@ class DirentListView extends React.Component {
return [];
}
+ onTableDragEnter = (e) => {
+ if (e.target.className === 'table-container ') {
+ this.setState({isListDropTipShow: true});
+ }
+ }
+
+ onTableDragOver = (e) => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+ }
+
+ onTableDragLeave = (e) => {
+ if (e.target.className === 'table-container table-drop-active') {
+ this.setState({isListDropTipShow: false})
+ }
+ }
+
+ tableDrop = (e) => {
+ e.persist();
+ this.setState({isListDropTipShow: false});
+ if (e.dataTransfer.files.length) { // uploaded files
+ return;
+ }
+ let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info');
+ dragStartItemData = JSON.parse(dragStartItemData);
+
+ let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartItemData;
+
+ if (e.target.className === 'table-container table-drop-active') {
+ if (nodeRootPath === this.props.path || nodeParentPath === this.props.path) {
+ return;
+ }
+ this.props.onItemMove(this.props.currentRepoInfo, nodeDirent, this.props.path, nodeParentPath)
+ }
+ }
+
render() {
const { direntList, sortBy, sortOrder } = this.props;
@@ -538,7 +575,16 @@ class DirentListView extends React.Component {
const sortIcon = sortOrder == 'asc' ? : ;
return (
-
+
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 5ba7784945..26df6f7218 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -118,6 +118,18 @@
.table-container {
flex: 1;
padding: 0 1rem 10rem;
+ position: relative;
+}
+
+.table-drop-active::before {
+ border: 1px solid rgba(69,170,242);
+ content: '';
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ z-index: -1;
}
.cur-view-content .article {
diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
index d0cdbd8ed0..dc2bb7c9a2 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -141,6 +141,11 @@ class LibContentContainer extends React.Component {
onItemsScroll = (e) => {
let target = e.target;
+
+ if (target.scrollTop === 0) {
+ return;
+ }
+
if (target.scrollTop + target.clientHeight + 1 >= target.scrollHeight) {
this.props.onListContainerScroll();
}
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index dd02160bae..90786f2657 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -306,6 +306,7 @@ class LibContentView extends React.Component {
// update data
this.loadDirentList(path);
+ this.resetShowLength();
if (!this.isNeedUpdateHistoryState) {
this.isNeedUpdateHistoryState = true;
@@ -405,7 +406,6 @@ class LibContentView extends React.Component {
if (!this.state.repoEncrypted && direntList.length) {
this.getThumbnails(repoID, path, this.state.direntList);
}
- this.resetShowLength();
}).catch(() => {
this.setState({
isDirentListLoading: false,
@@ -729,12 +729,12 @@ class LibContentView extends React.Component {
nodeParentPath = this.state.path;
}
let direntPath = Utils.joinPath(nodeParentPath, dirName);
- seafileAPI.moveDir(repoID, destRepo.repo_id,moveToDirentPath, nodeParentPath, dirName).then(res => {
+ seafileAPI.moveDir(repoID, destRepo.repo_id, moveToDirentPath, nodeParentPath, dirName).then(res => {
let nodeName = res.data[0].obj_name;
if (this.state.currentMode === 'column') {
this.moveTreeNode(direntPath, moveToDirentPath, destRepo, nodeName);
}
- this.moveDirent(direntPath);
+ this.moveDirent(direntPath, moveToDirentPath);
let message = gettext('Successfully moved %(name)s.');
message = message.replace('%(name)s', dirName);
@@ -996,8 +996,12 @@ class LibContentView extends React.Component {
// else do nothing
}
- moveDirent = (direntPath) => {
- let name = direntPath.slice(direntPath.lastIndexOf('/') + 1);
+ moveDirent = (direntPath, moveToDirentPath = null) => {
+ let name = Utils.getFileName(direntPath);
+ if (moveToDirentPath === this.state.path) {
+ this.loadDirentList(this.state.path);
+ return;
+ }
let direntList = this.state.direntList.filter(item => {
return item.name !== name;
});