Prevent from drag-dropping in a folder child

This commit is contained in:
benweet 2018-08-19 14:04:43 +01:00
parent 3fc974c14c
commit 0d39ca85fc
3 changed files with 23 additions and 11 deletions

View File

@ -1,9 +1,9 @@
<template>
<div class="explorer-node" :class="{'explorer-node--selected': isSelected, 'explorer-node--folder': node.isFolder, 'explorer-node--open': isOpen, 'explorer-node--trash': node.isTrash, 'explorer-node--temp': node.isTemp, 'explorer-node--drag-target': isDragTargetFolder}" @dragover.prevent @dragenter.stop="node.noDrop || setDragTarget(node.item.id)" @dragleave.stop="isDragTarget && setDragTargetId()" @drop.prevent.stop="onDrop" @contextmenu="onContextMenu">
<div class="explorer-node" :class="{'explorer-node--selected': isSelected, 'explorer-node--folder': node.isFolder, 'explorer-node--open': isOpen, 'explorer-node--trash': node.isTrash, 'explorer-node--temp': node.isTemp, 'explorer-node--drag-target': isDragTargetFolder}" @dragover.prevent @dragenter.stop="node.noDrop || setDragTarget(node)" @dragleave.stop="isDragTarget && setDragTarget()" @drop.prevent.stop="onDrop" @contextmenu="onContextMenu">
<div class="explorer-node__item-editor" v-if="isEditing" :style="{paddingLeft: leftPadding}" draggable="true" @dragstart.stop.prevent>
<input type="text" class="text-input" v-focus @blur="submitEdit()" @keydown.stop @keydown.enter="submitEdit()" @keydown.esc="submitEdit(true)" v-model="editingNodeName">
</div>
<div class="explorer-node__item" v-else :style="{paddingLeft: leftPadding}" @click="select()" draggable="true" @dragstart.stop="setDragSourceId" @dragend.stop="setDragTargetId()">
<div class="explorer-node__item" v-else :style="{paddingLeft: leftPadding}" @click="select()" draggable="true" @dragstart.stop="setDragSourceId" @dragend.stop="setDragTarget()">
{{node.item.name}}
<icon-provider class="explorer-node__location" v-for="location in node.locations" :key="location.id" :provider-id="location.providerId"></icon-provider>
</div>
@ -73,7 +73,6 @@ export default {
},
methods: {
...mapMutations('explorer', [
'setDragTargetId',
'setEditingId',
]),
...mapActions('explorer', [
@ -142,7 +141,7 @@ export default {
onDrop() {
const sourceNode = this.$store.getters['explorer/dragSourceNode'];
const targetNode = this.$store.getters['explorer/dragTargetNodeFolder'];
this.setDragTargetId();
this.setDragTarget();
if (!sourceNode.isNil
&& !targetNode.isNil
&& sourceNode.item.id !== targetNode.item.id

View File

@ -2,7 +2,7 @@
<modal-inner class="modal__inner-1--about-modal" aria-label="About">
<div class="modal__content">
<div class="logo-background"></div>
<small>© 2013-2018 Dock5 Software<br>v{{version}}</small>
<small>© 2013-2018 Dock5 Software Ltd.<br>v{{version}}</small>
<hr>
StackEdit on <a target="_blank" href="https://github.com/benweet/stackedit/">GitHub</a>
<br>
@ -59,13 +59,11 @@ export default {
.logo-background {
height: 75px;
margin: 0;
margin: 0.5em 0;
}
small {
display: block;
font-size: 0.75em;
opacity: 0.75;
}
hr {

View File

@ -191,9 +191,24 @@ export default {
openDragTarget: debounceAction(({ state, dispatch }) => {
dispatch('openNode', state.dragTargetId);
}, 1000),
setDragTarget({ commit, dispatch }, id) {
commit('setDragTargetId', id);
dispatch('openDragTarget');
setDragTarget({ commit, getters, dispatch }, node) {
if (!node) {
commit('setDragTargetId');
} else {
// Make sure target node is not a child of source node
const folderNode = getFolder(node, getters);
const sourceId = getters.dragSourceNode.item.id;
const { nodeMap } = getters;
for (let parentNode = folderNode; parentNode; parentNode = nodeMap[node.item.parentId]) {
if (parentNode.item.id === sourceId) {
commit('setDragTargetId');
return;
}
}
commit('setDragTargetId', node.item.id);
dispatch('openDragTarget');
}
},
},
};