finally fixed tree node drag and drop
mellbacon committed
May 7, 2023 at 22:59 UTC
09a027a05d050315a0f0a21fa30358925d27ff06
3 files changed
+14
-14
src/lib/FileTree.svelte
+2
-3
@@ -1,6 +1,5 @@
1
<script lang="ts">
2
import FileTreeView from "./FileTree/FileTreeView.svelte";
3
- export let tree = $filetree;
3
4
</script>
5
@@ -27,13 +26,13 @@
26
}]);
27
</script>
28
30
-{#if tree.length === 0}
29
+{#if $filetree.length === 0}
30
<div class="container">
31
<span>No folder/workspace open</span>
32
<button class="toolbar-button">Open Folder</button>
33
</div>
34
{:else}
36
-<FileTreeView tree={tree} on:nodeselect={(e) => {console.log(e.detail.node)}}></FileTreeView>
35
+<FileTreeView tree={$filetree} on:nodeselect={(e) => {console.log(e.detail.node)}}></FileTreeView>
36
{/if}
37
38
<style lang="scss">
src/lib/FileTree/FileTreeList.svelte
+12
-7
@@ -8,8 +8,6 @@
8
9
import FileTreeNode, { computeTreeLeafDepth } from "./FileTreeNode.svelte";
10
import Directory from "../../util/icons/Directory.svelte";
11
- import Sortable from 'sortablejs';
12
- import { afterUpdate, onMount } from "svelte";
11
import {filetree} from "../FileTree.svelte";
12
13
export let root = false;
@@ -28,10 +26,6 @@
26
27
let icon = Directory;
28
31
- onMount(() => {
32
-
33
- })
34
-
29
function findNode(nodeid, tree = null) {
30
if (!tree) {
31
tree = $filetree;
@@ -76,6 +70,17 @@
70
71
from.removeChild(el);
72
to.appendChild(el);
73
+
74
+ filetree.set($filetree);
75
+
76
+ e.target.parentElement.classList.remove("hover");
77
+ }
78
+
79
+ function dragenter(e) {
80
+ e.target.parentElement.classList.add("hover");
81
+ }
82
+ function dragleave(e) {
83
+ e.target.parentElement.classList.remove("hover");
84
}
85
86
const toggleExpansion = (event) => {
@@ -114,7 +119,7 @@
119
{/if}
120
{/each}
121
{:else}
117
- <li id={`filetree-node-${id}`} bind:this={ref} class="treenode" class:root={isroot}>
122
+ <li id={`filetree-node-${id}`} bind:this={ref} class="treenode" class:root={isroot} on:dragenter|stopPropagation={dragenter} on:dragleave|stopPropagation={dragleave} on:dragend|stopPropagation={dragleave}>
123
<!-- svelte-ignore a11y-click-events-have-key-events -->
124
<div bind:this={refLabel} class:selected class="tree-label" on:click={toggleExpansion} draggable={true} on:dragstart={dragstart}>
125
<span class="arrow" class:arrowDown>▶</span>
src/lib/FileTree/FileTreeNode.svelte
-4
@@ -29,10 +29,6 @@
29
let icon = File;
30
31
function dragstart(e) {
32
- e.dataTransfer.setData(
33
- "text/html",
34
- e.target.parentElement.outerHTML
35
- );
32
let data = {element: `filetree-node-${id}`, id:id, type: "node"};
33
e.dataTransfer.setData("text/plain", JSON.stringify(data));
34
}