How to drag an item onto another element using Vue.Draggable without the need for adding or removing

Question

How to drag an item onto another element using Vue.Draggable without the need for adding or removing

Are you familiar with the library https://github.com/SortableJS/Vue.Draggable?

I am trying to achieve a drag and drop functionality where I can drag a file into a folder. However, I am facing an issue as the @change event only provides data about the dragged item but not the item it is being dragged onto. Do you have any suggestions on how I can accomplish this?

I have created an example in this JSFiddle. In this demo, I would like to be able to update the value of file.folder_name inside the onFoldersChange method. Any insights on how I can achieve this?

Thank you!

javascript vue.js draggable sortablejs

Answer 1

Answer №1

If you would like the folders to have files inside them, each folder must be capable of holding files and serving as a draggable destination.

var vm = new Vue({
  el: "#main",
  data: {
    folders: [{
      name: "Folder1",
      contents: []
    }, {
      name: "Folder2",
      contents: []
    }, {
      name: "Folder3",
      contents: []
    }],
    files: [{
      name: "foo",
      folder_name: "Folder1"
    }, {
      name: "bar",
      folder_name: 'Folder2'
    }]
  },
  methods: {
    onFoldersChange() {
      console.log(arguments);
    }
  }
});

.dragArea {
  min-height: 10px;
}

<script src="//cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="//cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
<div id="main">
  <h1>Vue Draggable</h1>
  <div class="drag">
    <h2>Folders</h2>
    <div v-for="(element, index) in folders" :key="index">{{element.name}}
      <draggable v-model="element.contents" class="dragArea" :options="{group:{ put:'files'}}" @change="onFoldersChange">
        <div v-for="item in element.contents">
          {{item.name}}
        </div>
      </draggable>
    </div>

    <h2>Files</h2>
    <draggable v-model="files" class="dragArea" :options="{group:{ name:'files'}}">
      <div v-for="(element, index) in files" :key="index">{{element.name}}</div>
    </draggable>
  </div>

</div>

Answer 2

If you would like the folders to have files inside them, each folder must be capable of holding files and serving as a draggable destination.

var vm = new Vue({
  el: "#main",
  data: {
    folders: [{
      name: "Folder1",
      contents: []
    }, {
      name: "Folder2",
      contents: []
    }, {
      name: "Folder3",
      contents: []
    }],
    files: [{
      name: "foo",
      folder_name: "Folder1"
    }, {
      name: "bar",
      folder_name: 'Folder2'
    }]
  },
  methods: {
    onFoldersChange() {
      console.log(arguments);
    }
  }
});

.dragArea {
  min-height: 10px;
}

<script src="//cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="//cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
<div id="main">
  <h1>Vue Draggable</h1>
  <div class="drag">
    <h2>Folders</h2>
    <div v-for="(element, index) in folders" :key="index">{{element.name}}
      <draggable v-model="element.contents" class="dragArea" :options="{group:{ put:'files'}}" @change="onFoldersChange">
        <div v-for="item in element.contents">
          {{item.name}}
        </div>
      </draggable>
    </div>

    <h2>Files</h2>
    <draggable v-model="files" class="dragArea" :options="{group:{ name:'files'}}">
      <div v-for="(element, index) in files" :key="index">{{element.name}}</div>
    </draggable>
  </div>

</div>

How to drag an item onto another element using Vue.Draggable without the need for adding or removing

Answer №1

Similar questions

Display of Navigation Bar in Angular is Not Proper

Is it possible to run two commands in npm scripts when the first command initiates a server?

Design a dynamic table using JavaScript

Managing arrayBuffer in hapi.js: A Comprehensive Guide

The Vue component fails to respond to updates in plugin data

The Vue.js modal is unable to resize below the width of its containing element

Creating a drop-down menu that aligns perfectly under the bar in Material-UI: What you need to know

Simple way to retrieve the first and last date of the current month using Node.js

Arranging the data in the table by alternating rows using Datatables

How to identify generic return type in TypeScript

What are the steps to position this bootstrap drop-down menu above a fixed page header?

Error encountered when attempting to retrieve JSON data in JavaScript due to being undefined

Automatically fill in Vue files

How to retrieve the input value in React Autosuggest

What is the best way to transfer Kendo Grid row data to a Kendo popup window within a partial view using jQuery?

The issue of javascript Map not updating its state is causing a problem

Babel: deactivate transpilation of import directives

Issue with nextJS/Firebase database while experimenting with enabling web frameworks

Detecting drag events between connected angular ui-trees is a complex yet achievable task

Avoid showing images when the link is not working