Interactive Vue tree view featuring draggable nodes

I am currently working on creating a tree component in Vue.js, and I am facing challenges with implementing drag and drop functionality in the Tree component. I am unsure where to begin, as I have looked through similar code on GitHub but I am struggling to comprehend how it works.

This is the code I have so far:

Tree component:

<template>
  <div class="tree">
      <div @click.prevent="selectItem">
        {{ item.label }}
        <span class="icon" @click.stop="toggleNode">{{ expanded && isFolder ? '-' : '+' }}</span>
      </div>
      <ul v-show="expanded" v-if="isFolder">
        <cmp-tree class="item" :key="index" v-for="(child, index) in item.children"
                  :current-item="currentItem"
                  :item="child"> </cmp-tree>
      </ul>
  </div>
</template>
<script lang="ts">
  import Vue, { PropType } from 'vue';

  export default Vue.extend({
    name: 'CmpTree',
    props: {
      item: Object as PropType<any>,
      depth: { default: () => 0, type: Number },
      currentItem: Number,
      value: { default: () => null, type: Array }
    },
    data() {
      return {
          expanded: false as boolean,
          showContext: false as boolean,
      };
    },
    methods: {
      toggleNode(): void {
          this.expanded = !this.expanded;
      },
      selectItem() {
          console.log(this.item);
      },
    },
    computed: {
      isFolder(): void {
        return this.item.children && this.item.children.length
      },
    },
  });
</script>

Main Component for Displaying Tree:

<template>
  <div id="app">
    <CmpTree v-for="(item, index) in items"
             class="item"
             :current-item="currentItem"
             :item="item"
             :key="index"
             contextmenu>
    </CmpTree>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import CmpTree from '@/components/CmpTree.vue';

export default Vue.extend({
  name: 'ServeDev',
  components: {
    CmpTree
  },
  data(): any {
    return {
      items: [
        {
          label: 'item1',
          children: [
            {
              label: 'item1.1'
            },
            {
              label: 'item1.2',
              children: [
                {
                  label: 'item1.2.1'
                },
                {
                  label: 'item1.2.2'
                }
              ]
            }
          ]
        },
        {
          label: 'item2'
        }
      ],
      selectedItems: [],
      currentItem: null,
    }
  }
});
</script>

Can someone recommend any articles or resources that would help me get started with building this functionality?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access to a custom Google Map via an API connection

I currently have multiple custom Google Maps that I created using and they are all associated with my Google account. Is it possible to access these maps using the Google Maps JavaScript API? It seems like the API does not work with manually created maps ...

DiscoverField Component with Button Functionality and Checkbox Dilemma

I'm working with Vue 3, Vuetify, and TypeScript for my searchField component. Inside, I have two buttons: FreeItemMaster and PatternMaster. Clicking on these buttons should change their background color and display respective content below them. Howev ...

``There seems to be an issue with the Express app when trying to access it

I have set up an express app that I want other devices on the same WIFI network to access without requiring internet connectivity. The main computer hosting the app is assigned with a fixed IP address: 192.168.1.60 In my server.js file, I have included t ...

Having issues with showing an image from a specified component in a separate file

I am facing an issue where my image is not displaying in the app.js file, even though I have imported it from another file named comp.js. Here is the current code in app.js: import React from 'react'; import TextImg from "./Comp"; impor ...

Utilizing Google App Engine for seamless deployment, integrating Ajax for dynamic interactions, and

Using the google App Engine, I am looking to implement javascript (or Ajax) for POSTing a form and updating the target div. The form includes multiple fields and files for transfer. The javascript function I am using is extracted from the "Javascript: The ...

Storing Firestore Timestamp as a Map in the database

Snippet Below const start = new Date(this.date + 'T' + this.time); console.log(start); // Thu Sep 12 2019 04:00:00 GMT+0200 const tournament:Tournament = { start: firebase.firestore.Timestamp.fromDate(start) } When passing the tournament ...

There seems to be a problem with the output when trying to display the message "You said ${reply}"

In the following code snippet, vanilla.js is being used with ATOM as the text editor and running on nodejs via terminal: 'use strict'; const Readline = require('readline'); const rl = Readline.createInterface({ input:process.stdin, ...

Delay in only a portion of the AJAX response

I created a chat application that is functioning correctly, but I am encountering an unexpected behavior. When a user sends a message, the user's name, time, and message should be displayed in order. However, currently, it seems like the username and ...

The routing feature functions properly on localhost but encounters issues on the live server

There seems to be an issue with this code. While it works perfectly on localhost, it doesn't function as expected on a live Apache server. I have already specified the homepage in the package JSON file and included an htaccess file. However, when acce ...

Tap on the image to enlarge

I have a question regarding using thumbnails from Bootstrap. I am trying to create functionality where when I click on a thumbnail, the picture with its original sizes appears and then disappears when clicked anywhere else on the page. Below is an exampl ...

Tips for adjusting the border color of a MUI Select field

https://i.stack.imgur.com/rQOdg.png This MUI select box changes color from blue to black based on selection. The challenge is to customize the text and border color to white (currently set as blue). Any suggestions on how to achieve this? ...

Using the Moment library in a NestJS application

I am integrating momentjs into my nestjs application and I want to ensure that my services can be tested effectively. To achieve this, I have included momentjs in my module setup as shown below: providers: [ { provide: 'MomentWrapper', ...

I am struggling to add a list from these nested functions in Express, but for some reason, the items are not being properly

I am currently working with three nested functions and facing an issue where the last function is not returning the desired list of items. Interestingly, when I log the results of the last function within the loop, I can see the URLs that I need. However, ...

What is the best way to set a prop as the value of an input using Vue.js 2?

Here is my Vue component: <template> <div class="modal" tabindex="-1" role="dialog"> <form method="post" :action="baseUrl+'/product/edit'"> ... <input type="hidden" name="product_id" :val ...

Using back end proxy for content delivery

I am facing a challenge with my iOS app that requires proxying through a private server (HTTP / HTTPS proxy). Every time I attempt to address this issue on the client-side, new problems arise. How can I use the back end to effectively solve this problem? ...

Execute a single test from a particular test suite using Jest

Within my file named "test-file-1", I have several describes (test suites) with distinct names, each containing tests that may share similar names across different test suites. In order to run a single test suite or test, I enter the following command: n ...

Guidelines for incorporating Angular variables into jQuery scripts

I have a form with an input field that dynamically generates a list of names using Angular. My goal is to turn each name into a clickable link that will submit the form with that specific name as the input value. <form method="POST" action="/results/" ...

I am curious about the Vue component architecture and have some inquiries regarding its structure

While teaching myself Vue, I encountered a problem. Initially, I connected some components using new Vue ({el:" # id "}). However, when I linked the root component <div id = "app"> with new Vue ({el:" # app "}), it disrupted the existing bindings. ...

Tips for troubleshooting ImageArray loading issues in AngularJS

Having some trouble learning Angular and getting stuck with this Image array. Can someone please help me understand what's wrong with my code and how to fix it? FilterAndImages.html <!DOCTYPE html> <html ng-app="store"> <head> < ...

Inquiry to an outside domain

I need to send a request to an external domain, ensuring that the parameter is correctly sent to a PHP file on the external server. However, I'm facing an issue where "request.responseText" always returns empty. Any assistance in this matter would be ...