A draggable sortable vue tree component, with dragging placeholder, types definition.

Overview

he-tree-vue

A draggable sortable vue tree component, with dragging placeholder, types definition. Vue3 supported. Demo, Document

可拖拽可排序vue树组件, 支持拖拽占位盒, typescript定义文件, vue3. 演示, 文档

image

License

MIT

Issues
  • How to use Fold Plugin.

    How to use Fold Plugin.

    I tried to use fold plugin props foldAllAfterMounted in this example but it didn't work.

    <template>
      <Tree :value="treeData" :foldAllAfterMounted="false">
        <span slot-scope="{node, index, path, tree}">
          <b @click="tree.toggleFold(node, path)">
            {{node.$folded ? '+' : '-'}}
          </b>
          {{node.text}}
        </span>
      </Tree>
    </template>
    <script>
    import 'he-tree-vue/dist/he-tree-vue.css'
    import {Tree, Fold} from 'he-tree-vue'
    
    export default {
      components: {Tree: Tree.mixPlugins([Fold])},
      data() {
        return {
          treeData: [{text: 'node 1'}, {text: 'node 2', children: [{text: 'node 2-1'}]}]
        }
      },
    }
    </script>
    
    opened by iarafat 25
  • Update parent_id and path after dragging and dropping element

    Update parent_id and path after dragging and dropping element

    Hi,

    How can I update values in parent_id and path after drag and drop event is completed?

    So for example I have the below structure:

    image

    As you can see the 3rd element with id of 363 has wrong parentId of 54 (should be 55) and path should be 1 instead of 2 as it is a first element in that array.

    Any idea how can I update those values dynamically so I can then save them back into mysql?

    Many thanks for your help!

    opened by mahoone 11
  • Using getNodeParentByPath for a dragged node

    Using getNodeParentByPath for a dragged node

    Hi,

    I am working with a Draggable plugin. How can I access the parent of the dragged node? I see getNodeParentByPath method, but how do I call it?

    <template>
      <Tree
        :value="categoryTreeData"
        draggable
        droppable @drop="handleTreeChange"
      >
        <span slot-scope="{node, index, path, tree}">
          <template v-if="!node.isDragPlaceHolder">
            <span
              v-if="node.children && node.children.length"
              @click="slot.store.toggleOpen(node)"
            >
              <v-icon v-if="node.open" small class="mr-1">mdi-minus-box-outline</v-icon>
              <v-icon v-if="!node.open" small class="mr-1">mdi-plus-box-outline</v-icon>
            </span>
            <span :class="{ 'draggable-node--drop-disabled': node.droppable === false }">{{ node.text }}</span>
          </template>
        </span>
      </Tree>
    </template>
    <script>
    import { Tree,  Draggable } from "he-tree-vue"
    import 'he-tree-vue/dist/he-tree-vue.css'
    import sortBy from 'lodash/sortBy'
    
    export default {
      name: 'CategoryTreeSort',
      components: {Tree: Tree.mixPlugins([Draggable])},
      methods: {
        async handleTreeChange (store) {
           const {dragNode} = store
           // how to get the parent of dragNode?
        }
    ....
    

    Thank you

    opened by rubinovk 7
  • Plugin Draggable: Dragging an element downwards inserts it in wrong order

    Plugin Draggable: Dragging an element downwards inserts it in wrong order

    Hi

    I'm using v2.0.8 with the plugins Fold, Check, Draggable as in your Demo

    When an elment is dragged downwards after dropping it will be inserted at index (placeholderIndex - 1) instead of (placeholderIndex). Dragging an element upwards works as expected.

    Any ideas what's going wrong here?

    Thanks dsheyp

    opened by dsheyp 6
  • How to disable auto check childs?

    How to disable auto check childs?

    Is there a way to disable auto checking sub-menus by checking parent? and of course vice versa Edit: I want to disable the above behavior also for deleting nodes. Prevent deleting childs as well.

    Edit: Another question :) How to have multiple Trees while only some of them are draggable? loading Draggable components makes them all draggable.

    opened by d4rkr3pt0r 5
  • edgeScroll: define which scroll container to scroll

    edgeScroll: define which scroll container to scroll

    just evaluating this library and looks promising, thanks a lot!

    Although something I've encountered: My tree is within a sidebar component (fixed, own scroll). So having a long tree I need scrolling. Enabling edgeScroll though scrolls down the whole document (therefore the main component) instead of my sidebar only. Is there a way to specify which container should be scrolled?

    opened by RSSfeed 4
  • Using he-tree-vue with nuxt throws an error on draggable on refresh

    Using he-tree-vue with nuxt throws an error on draggable on refresh

    First off thanks a lot for great work.

    I'm using he-tree-vue in my nuxt project, this works perfectly when the server just started. But once the page is refreshed it shows the following error when dragging.

    image

    opened by websiddu 4
  • Problem with targetPath at nested branches

    Problem with targetPath at nested branches

    I have strange targetPath in the store at drag event. You can see it here - https://codesandbox.io/s/hardcore-jackson-nr5xl?file=/src/App.vue

    when I drop first element to second position I expect, that targetPath be [0, 1], but now it [0, 2]. in the DOM data-tree-node-path updated correctlly

    opened by schrodinger-cat 4
  • Export default imported as Tree not found in 'he-tree-vue' warning

    Export default imported as Tree not found in 'he-tree-vue' warning

    I am following the getting started guide posted here: https://he-tree-vue.phphe.com/guide.html#installation

    However while trying to experiment with the most basic example I get this warning: "export 'default' (imported as 'Tree') was not found in 'he-tree-vue'

    Background: I installed the package by using "npm i -P he-tree-vue" and then got a warning for PeerDependencies so i installed vue property decorator by "npm install --save-dev [email protected]^8.5.1".

    opened by ghadjigeorghiou 4
  • Drag items outside the tree

    Drag items outside the tree

    Hello,

    I have a he-tree with the draggable plugin, so I can reorder my tree easily. I also would like to drag items outside the tree, into a dropbox. This works well with vue's "draggable" feature, as long as I don't enable he-tree's draggable plugin. Is there a way to use both simultaneously? Drag within the tree, but be able to drag outside the tree as well?

    Thanks

    opened by balint80 1
  • How to get a list of checked items?

    How to get a list of checked items?

    Using @change only shows individual item getting checked. How I get a collection of all current checked items?

    opened by TNortnern 3
  • Tree data field where path is its property

    Tree data field where path is its property

    May I have an example on giving the tree data let's say a sort field, where this field is tree component's path property? Ex. { name: "Category 1", sort: [0, 1, 1, 1] }

    opened by dipzera 4
  • Where can I find full source code of demo?

    Where can I find full source code of demo?

    opened by PhilLovesToCode 1
  • How to know the target node on before drag end.

    How to know the target node on before drag end.

    How can I get the target node on before dropping the node on the targeted tree?

    opened by luckyboy07 1
  • Tree Inside a table

    Tree Inside a table

    Hey @phphe you have done a nice job. It's a much needed library. Thanks for this wonderful work.

    I want to implement this library inside a tbody tag.

    i.e.

    table
      tbody
        treeview
          tr
            td
            td
    

    I have used the overrideSlotDefault method to override the default slot, but CSS is not applied to td tags.

    i.e. it looks like the last td is not drawn.

    It look like All the contents are filled inside the first td. i.e.

    | ID | Name | Action | |---|---|---| | 1 Abcd Action Button | | |2 Mnop Edit Link | | | 3 Pqrs Edit Link | |

    So, is it possible to write a tree inside table using your library ?

    opened by belt-basya 2
  • Update node from walkTreeData

    Update node from walkTreeData

    I'm trying to walk the tree and update nodes.

    I tried using code I found for earlier versions, but it doesn't seem to work anymore with Vue 3 / he-tree-vue 3.0.0.

    Trying to use this.$set() results in this error:

    TypeError: _this2.$set is not a function
        at eval (ModelTreeView.vue?98ec:35)
        at func (helper-js.esm.js?0fa5:889)
        at depthFirstSearch (helper-js.esm.js?0fa5:907)
        at TreeData.walk (helper-js.esm.js?0fa5:1145)
        at walkTreeData (he-tree-vue.esm.js?94dd:20)
        at Proxy.walkTreeData$1 (he-tree-vue.esm.js?94dd:193)
        at Proxy.showHidden (ModelTreeView.vue?98ec:34)
        at eval (Model.vue?1751:225)
    

    I prepared a sandbox to reproduce the issue. Please click "Hide" or "Show hidden" to trigger it: https://codesandbox.io/s/vue-cli-and-he-tree-vue-example-forked-xv1ww?file=/src/components/TreeView.vue

    How can I walk through all the nodes of the tree and update their attributes?

    Thank you for your help and this amazing component!

    opened by marco-viewpoint 5
  • How can i update a specific tree node?

    How can i update a specific tree node?

    Hi, first of all, thanks for this nice component!

    I'm wondering if I can update tree node data directly without having to reload the entire tree. For example change the title of a node in a given path, after receiving data from an http request.

    Is this possible with any of the available api methods? I've been trying for a while now, but without any success.

    opened by manyasone 1
  • How to have a root single node

    How to have a root single node

    Hi, I'm trying to have a tree in which all the nodes have to be hanging from a single root node. You can see the data below, in the id 1 I set draggable to false, so can't be modify, but I still can drop a node in the same level that this node, there is any way to disable this?

    { treeData: [ { id: 1, text: "root", isRoot: true, $draggable: false, children: [ { id: 2, text: "node 2", isRoot: false, $draggable: true, $droppable: true, }, { id: 3, text: "node 2-1", isRoot: false, $draggable: true, $droppable: true, }, { id: 4, text: "node 2-2", isRoot: false, $draggable: true, $droppable: true, }, ], }, ], };

    opened by Kowiste 1
  • Does he-tree recognize a drop on ?

    Does he-tree recognize a drop on ?

    Hi phphe,

    thanks for your great tree library, i bought the pro version.

    my question is: is the he tree able to recognize if i drop a node (from another tree) directly onto a node in the other tree ? if yes, how can that be done ?

    Thanks in advance Adrian

    opened by duderion 1
Owner
Xinxin
I am a js, python, php developer. I live in the hometown of pandas.
Xinxin
Vue2 Component for draggable and resizable elements.

VueDraggableResizable 2 Vue2 Component for draggable and resizable elements. If you are looking for the version 1 of the component, it is available on

Maurizio 2.2k Jul 23, 2021
Vue2 directive that handles drag & drop

draggable-vue-directive Vue directive (Vue.js 2.x) for handling element drag & drop. Installation npm install draggable-vue-directive --save Demo You

Israel Zablianov 295 Jul 24, 2021
Vue wrapper components for smooth-dnd

Vue Smooth DnD A fast and lightweight drag&drop, sortable library for Vue.js with many configuration options covering many d&d scenarios. This library

Kutlu Sahin 1.2k Jul 19, 2021
A set of vue mixins to turn any list into an animated, touch-friendly, sortable list ✌️

Vue Slicksort ?? A set of component mixins to turn any list into an animated, touch-friendly, sortable list. Based on react-sortable-hoc by [@clauderi

A Jordan Simonds 1.1k Jul 21, 2021
Vue Drag and Drop library without any dependency 👌

Description Vue Drag and Drop library without any dependency. Native HTML5 drag and drop implementation made for Vue. Examples ?? Installation npm ins

Vivify Ideas 268 Jul 28, 2021
A sortable list directive with Vue

Awe-dnd Makes your elements draggable in Vue. See Demo: http://hilongjw.github.io/vue-dragging/ Some of goals of this project worth noting include: su

Awe 715 Jul 7, 2021
A draggable sortable vue tree component, with dragging placeholder, types definition.

he-tree-vue A draggable sortable vue tree component, with dragging placeholder, types definition. Vue3 supported. Demo, Document 可拖拽可排序vue树组件, 支持拖拽占位盒

Xinxin 88 Jul 18, 2021
Vue Component for resize and drag elements

Vue-drag-resize Vue Component for draggable and resizable elements. Table of Contents Features Install and basic usage Props Events Contributing Licen

null 1.2k Jul 24, 2021
A lightweight Vue wrapper that abstracts away the wonkier parts of the Drag and Drop Browser API

❗ Version 1.0.0 is out! This finally includes support for IE/Edge. Note that this required skipping the native transferData event property entirely in

J. Cameron McDonald 460 Jul 22, 2021
Vue2 component, that allows you to drag object wherever you want

vue-drag-it-dude Vue2 component, that allows you to drag object wherever you want What this can do Drag and drop DOM elements inside parent (or docume

Max Novikov 71 Jun 21, 2021
A simple drag & drop hierarchical list made as a vue component.

vue-nestable Drag & drop hierarchical list made as a vue component. Goals A simple vue component to create a draggable list to customizable items Reor

Ralph Huwiler 238 Jul 18, 2021
:ok_hand: Drag and drop so simple it hurts http://astray-git.github.io/vue-dragula

vue2-dragula ?? Drag and drop so simple it hurts Vue wrapper for dragula drag'n drop library, based on vue-dragula by @Astray-git. This library has be

Kristian Mandrup 209 May 7, 2021
🦄 Vue components for modifying lists with the HTML5 drag & drop API.

Vue components for modifying lists with the HTML5 drag & drop API. ?? Warning ?? Don't set index to the :key, it will cause dragging confusion. <vddl-

Hejx 405 Jul 27, 2021
Drag And Drop functionality for Vue.js - written in Vue.js

vue-dnd-zone is a vue.js plugin for drag and drop functionality. It is not a wrapper for an external js library, but a set of vue components managing the drag and drop event and data model state

Yair Levy 89 Jul 24, 2021