amendx/vue-dndrop

:herb: A vue library for drag and drop :sparkles:

Amanda Esmeraldo 👩‍💻

Wow!! Be careful! We're working over here...

This is my QA ... we're testing some new features..... 💫

But let's talk about moi! My name is Amanda and I'm a front-end developer. The thing is I love everything too much, and every task is a new chance to learn (learn how to fix the bug I just created...). I'm also a huge fan of sports, cats and coooofffeeee ☕.

When I'm not busy crafting beautiful web pages or breaking my heart trying to know who placed a !important on a div somewhere, you can find me at the gym. I'm also a social butterfly who loves meeting new people and swapping programming horror stories over a cold brew ✨

Here are a few things that make my heart flutter:

• 💚 In love with CSS & JavaScript
• 👻 Pair-programming with Vue.js, Angular and React
• 💪 Powerlifting and hitting the gym
• 🎶 Playing guitar hero and singing (badly)
• 🐱 Snuggling with every cat I meet

Languages and tools:

Stats

vue-dndrop's Issues

Remove console.log in /dist

Hi,

There is a console.log('draggable info', draggableInfo.element); in vue-dndrop/dist/vue-dndrop.js:1913.
Can you remove it or add a debug flag to disable in production?

Thanks in advanced!

Refreshing an array

Hi.
When I init the array for the first time, the drag and drop seems to work fine. However, when I refresh the array a second time, the drag and drop no longer works well. Viewing it within the 'onDrop', I can see that the dropElement has 'addedIndex' of null.

npm package for Vue 3.x does not include utils

Installing npm package using:

$ npm i vue-dndrop@next

does not provide utils

Vue 3 - "TypeError: createElement is not a function"

I currently use Vue 3 and in my package.json I have "vue-dndrop": "^ 1.2.2". After running the npm update command the component has stopped working and I always get this error: "Uncaught (in promise) TypeError: createElement is not a function". What can this be due to?

Support for drop zones beyond container size

Hi!

I was wondering if there's a way for a container drop zone to expand larger than the container itself.

Example:
https://user-images.githubusercontent.com/32264015/150443983-5ee77c53-5cec-4886-b6b5-1814b799bf6f.mp4

Thanks!

Vue 3 - "createElement is not a function"

Hi ! Just faced with problem when using vue 3 version of library.

I've installed it using npm and copied one of example in my project

npm i vue-dndrop@next

But still no results. Getting same createElement error which is common for vue 2 library running on vue 3

Would appreciate your help

Libary not working

Vue 2

Installed as per the documentation, but the following error appears:

My Code

<script>
import { Container, Draggable } from 'vue-dndrop'
import { applyDrag, generateItems } from '@/components/utils/Dnd'

export default {
  name: 'Simple',

  components: { Container, Draggable },

  data() {
    return {
      items: generateItems(10, i => ({ id: i, data: 'Draggable ' + i }))
    }
  },

  methods: {
    onDrop(dropResult) {
      this.items = applyDrag(this.items, dropResult)
    },
    getGhostParent() {
      return document.body
    },
    onDropReady(dropResult) {
      console.log('drop ready', dropResult)
    },
    dropNotAllowed({ payload, container }) {
      console.log('drop not allowed')
    }
  }
}
</script>
<template>
  <div class="simple-page">
    <Container
      :get-ghost-parent="getGhostParent"
      :remove-on-drop-out="true"
      @drop="onDrop"
      @drop-ready="onDropReady"
      @drop-not-allowd="dropNotAllowed"
    >
      <Draggable v-for="item in items" :key="item.id">
        <div class="draggable-item">
          {{ item.data }}
        </div>
      </Draggable>
    </Container>
  </div>
</template>

Drag to select

I've got a draggable with drag-not-allowed set to true when the draggable is in edit mode. The issue I'm running into is the dndrop-no-user-select class is applied to the doc body when I try to drag select text. I can select all the text by double clicking so it looks like its just the dragging that is the issue. I've tried non-drag-area-selector on the container but it doesn't seem to do what I would expect it to do.

Cloning Behaviour

Hello there,

It's an awesome library that you have developed, thank you!

So my question for you is regarding the a specific behavior in one of your examples,

Events

Observed Behavior

Here, I was confused about the cloning behavior of the Draggable elements once you have more than one columns
and for one of the columns if the Accept Drop property is checked off. Now while dragging the elements from the
checked off Accept Drop column, instead of moving the element to the drop row, it creates a clone for that element
and if you keep on dragging them more and more, it creates more clones.

Is this the expected behavior? I was not able to wrap my head around the thought of why would this be the case, if you can explain it to me why is such behavior expected, that'd be great.

If this is not an expected behavior, could you please recommend some work around for this such that, once the Accept Drop box is checked off and if we try to move elements from this column to another column, it should just move the element instead of cloning it.

Observed Behaviour:

Expected Behaviour:
Instead of cloning, is is possible to move the elements to the other column?

Thank you

Does not play well with grid or flex "gap" property

The spacing between draggable elements is wrong (when dragging) if the container is a using css-grid or flexbox with the "gap" property for spacing instead of margin.
How can we fix this ?

Thanks!

Running multiple vue instances each using this library causes an exception

I switched from using vue3-smooth-dnd for the same technical issue you reported here:

https://stackoverflow.com/questions/58070311/react-smooth-dnd-library-causing-and-illegal-invocation-error

My issue didn't manifest itself in testing though. It manifested itself when loaded by single-spa. So I switched to your vue-dndrop library.

In our app, we are running multiple vue instances, each of which is using this library. One of the instances is an MFE handled by single-spa. The other is a served up module containing some vue components that live in their own vue instance.

Having this library imported on the same page more than once causes errors in the onMouseDown() function.

The problem is caused by this code.

function onMouseDown(event) {
  var e = getPointerEvent(event);

  if (!_isDragging && (e.button === undefined || e.button === 0)) {
	grabbedElement = getParent(e.target, '.' + wrapperClass);

	if (grabbedElement) {
	  var containerElement = getParent(grabbedElement, '.' + containerClass);
	  var container = containers.filter(function (p) {
		return p.element === containerElement;
	  })[0];
	  var dragHandleSelector = container.getOptions().dragHandleSelector;
	  var nonDragAreaSelector = container.getOptions().nonDragAreaSelector;

The onMouseDown() function gets called for each vue instance on the page but when it gets called for the instance(s) that is/are not the correct one, the containers array will be empty causing the filter() function to return undefined resulting in the container variable being undefined. When we then call getOptions() on the undefined container we get this error:

vue-dndrop.esm.js?43d0:1290 Uncaught TypeError: Cannot read properties of undefined (reading 'getOptions')
at HTMLDocument.onMouseDown (vue-dndrop.esm.js?43d0:1290:1)

Adding containers.length && to that first if statement resolves the error.

if (containers.length && !isDragging && (e.button === undefined || e.button === 0)) {

And you should still probably make sure that the container variable is not undefined before calling getOptions() on it.

But you can still only drag an item the first time.

Scroll to bottom when dragging

I love this library. I have a problem that I can not drag elements to the drop zone when I already have elements that have a big height. So that it requires to scroll down.

It is also the same issue when there is a large number of elements where a page scroll is required to see the last element. Like the example https://amendx.github.io/vue-dndrop/examples/drag-class.html
Try to drag the first element to the last position.

I would believe that the auto-scroll functionality would handle it, but I don't see how it works. When I drag the element at the bottom of the viewport and the dropzone is below what is visible, then there is no scrolling.

Any thoughts on a solution for this problem?

Not working in modal

The library didn't work if putting it inside modal.

Doesn't appear to work with VUE 3

vue-router.esm-bundler.js:3284 TypeError: createElement is not a function
    at Proxy.render (webpack-internal:///./node_modules/vue-dndrop/dist/vue-dndrop.esm.js:2881)
    at renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:891)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4636)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:197)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4762)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4545)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4503)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4107)
    at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4294)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4203)

Not working with Iframes

A really very nice plugin, but it doesn't work in iframes. As soon as you drag an element into an iframe, the drag is blocked.
Inside an iframe nothing can be dragged.

<div class="frame">
<iframe ref="iframe" @load="ready = true" src="about:blank" />
<Teleport v-if="ready" :to="$refs.iframe.contentWindow.document.body">
<div class="simple-page">
<Container @drop="onDrop">
<Draggable v-for="item in items" :key="item .id">
<div class="draggable-item">
{{item .data}}
</div>
</Draggable>
</Container>
</div>
</Teleport>
</div>

options to prevent native link dragging?

the element get stuck and start following the mouse, I have to right-click for it to drop in place, which is very annoying.
any way to fix this besides adding custom CSS?

a {
    -webkit-user-drag: none;
    user-select: none;
}

Vue3 (vue-dndrop 1.2.9) Uncaught TypeError: createElement is not a function

Problem

Uncaught TypeError: createElement is not a function

Description

I created a new project and installed only this package on it. I wanted to test its performance.
I installed the vue-dndrop@next package
Unfortunately, after copy the example I get an error

Versions

• "vue": "^3.2.13",
• "vue-dndrop": "^1.2.9"
• Browser: Chrome 103 on Linux

Stack

app.js:220 Uncaught TypeError: createElement is not a function
    at Proxy.render (vue-dndrop.esm.js?03c6:2903:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:896:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5580:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at instance.update (runtime-core.esm-bundler.js?d2dd:5694:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5708:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:5490:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:5448:1)
    at patch (runtime-core.esm-bundler.js?d2dd:5038:1)
    at mountChildren (runtime-core.esm-bundler.js?d2dd:5234:1)

Code

HelloWorld.vue

<template>
  <div>
   <div class="simple-page">
       <Container @drop="onDrop">
         <Draggable v-for="item in items" :key="item.id">
           <div class="draggable-item">
             {{item.data}}
           </div>
         </Draggable>
       </Container>
   </div>
 </div>
</template>

<script>
import { Container, Draggable } from 'vue-dndrop';
import { applyDrag, generateItems } from './utils';

export default {
 name: 'HelloWorld',
 components: { Container, Draggable },
 data() {
   return {
     items: generateItems(50, (i) => ({ id: i, data: `Draggable ${i}` })),
   };
 },
 methods: {
   onDrop(dropResult) {
     this.items = applyDrag(this.items, dropResult);
   },
 },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

utils.js

export const applyDrag = (arr, dragResult) => {
 const { removedIndex, addedIndex, payload } = dragResult;
 if (removedIndex === null && addedIndex === null) return arr;

 const result = [...arr];
 let itemToAdd = payload;

 if (removedIndex !== null) {
   // eslint-disable-next-line prefer-destructuring
   itemToAdd = result.splice(removedIndex, 1)[0];
 }

 if (addedIndex !== null) {
   result.splice(addedIndex, 0, itemToAdd);
 }

 return result;
};

export const generateItems = (count, creator) => {
 const result = [];
 for (let i = 0; i < count; i += 1) {
   result.push(creator(i));
 }
 return result;
};

when support shadow dom?

when support shadow dom?

Not work with Card

Example code as https://amendx.github.io/vue-dndrop/guide/using-vue.html#simple-component works fine,but if the code area

<div class="draggable-item">
              {{item.data}}
            </div>

was replaced by

<div class="draggable-item">
        <q-card>
           .........
     </q-card>
    </div>

nothing will show

Demo not working

I was checking the repo out the other day and the demo was amazing. But, it is no longer up. What happened?

Thanks

Item can be duplicated when should-accept-drop returns false on the "from" container

When using multiple columns and one column returns false in the should-accept-drop hook, items in this column can be dragged into other columns and it won't be removed from the initial column. This problem can be seen in the Example.

Steps to reproduce:

1. Open https://amendx.github.io/vue-dndrop/examples/events.html
2. Add a column
3. Disable "Accept Drop" on the right column
4. Move an item from the right column to the left column.

The element will move to the new column but also stays put on the right one. I would expect that the element moves to the left column and disappears from the right one.

Vue3 doesn't work

Although others have asked this question, I want to say it anyway.

I've tested two versions vue2 and vue3. In vue2, it's works, but in vue3, it not work.

I'm using a very basic approach, vue create drop-test, select default config and replace HelloWorld.vue with your demo code.

In vue2:

In vue3:

None of all events worked. This results in data not being saved when drop.

where do i find the utils js used in the examples?

Custom ghost element

First of all, congratulations for the library, I wanted to ask you if it is possible to completely define the element that is dragged (ghostelement) in many cases, the element to be dragged is large and makes it difficult to fit it into the drop zones.

Thank you so much!

Vue3 (vue-dndrop 1.2.11) - Draggable elements only drag once, then stops

Problem and description

The first time you drag and drop an item, the drag and drop works fine, but after that it is impossible to move any item.

Stack and versions

I used the same code from issue: : #58 (comment)
I also used the code from various examples and the same problem occurred

From my debugging, it seems that the Container drop function doesn't even fire the second and more times

Drag and drop not working quite right with allot of items

I started to use vue-dndrop (vuejs v2) today
and on a page with like 4 or so items it worked perfectly however i notice it not working correctly.
if there was allot more items on the page
it works for like the first 5 ish+- but does not work after that

Any ideas?
Also like this notice how the top draging is like instant (close to each other) and the bottom one it opens like 2 cards above it already

and proberbly because i have data in them so there bigger i can't drop them anymore cause they don't "open" up in my view

Is this issue with my style or how could i fix this?

Greetings

Support paging for Container

The solution works perfectly with small amount of data, however, with large number of items (from few hundreds or beyond), we will suffer performance issue.

I think the solution is to add one option to make <Container /> pageable, like a data-table.

question: dropPlaceholder functionality

I'm working with vue-dndrop with Vue3. I have everything mostly working but I can't seem to style the drop placeholder. I've supplied a class with dropPlaceHolderOptions but the class doesn't seem to apply. I'm looking for a similar effect to the Card and Kanban examples where there is an bordered placeholder but all I get is a visibility hidden element. The space is there but the styling isn't. Any suggestions on troubleshooting this?

Element didn't return

Drop and here Drop ready, this events didnt return element in properties of dropResult

Draggable as an attribute?

Ok I can live with wrapping draggables inside a Container, but since I want my draggables to be custom elements, there seems no way to pass those in to Draggable itself: :tag="{value: 'my-custom-component'}" doesn't work since MyCustomComponent is not registered within Draggable. So as a work-around, would it be possible to add Draggable as an attribute? Then I could do the following:

<Container ...>
<my-custom-element :draggable="true" v-for="item in dataset" .../>
</Container>

That would make this library work for my use case and set it above all the other libraries out there that have the same limitation.

Apply transformation on cloning

Hello !
I'm having a hard time figuring how to apply a transformation when an item gets cloned between two lists.

Is there such event ?

Thx :)

version : 1.1.0
vue2

No Animation

I am creating a storage ui where the user should be able to drag items from the inventory to the storage and the other way around.
The problem I encounter is the animation when dragging a Draggable, it shifts the other Draggables in the Container (https://streamable.com/xqp8hh).
My question: Is it possible to remove the animation and the shifting at all so I can just drag the Item "over" the others?

Not enough documentation

@amendx @leotabosa
Here in Cards examples we have import { applyDrag, scene } from "../utils/helpers"; but, there w dont have this files with code examples

also Kanban board we can't see logic in this files

import { applyDrag, scene, lorem } from "../utils/helpers";
import Kanban from "./kanban.vue";

Please improve documentation with that files (styles also) or add that files to examples of code. Also check other places

feature-request: typescript support

Hi everyone, I currently use this library in a project and I would like to contribute by adding typescript support. Do you want me to work on this? If yes, would it rather be by replacing every .js with .ts or by adding an index.d.ts?

Thanks for your repository.

@drop will return `element: null` if content inside Draggable wasn't wrapped in a tag.

I found that if content inside Draggable is not wrapped inside a tag.
The element property of the returned object of @drop event will be null.
I think this could be mentioned in the doc somewhere.

<script setup>
function onDrop(dropResult) {
  console.log(dropResult); // { ..., element: null }
}
</script>

<template>
  <Container @drop="onDrop">
    <Draggable v-for="item in items" :key="item">
      {{ item.data  }} 
    </Draggable>
  </Container>
</template>

---

Easy to fix this with wrapping the content inside Draggable in a tag

<Draggable v-for="item in items" :key="item">
  <div>
    {{ item.data }}
  </div>
</Draggable>

Enable Drag and Drop everywhere in a <div> on a Grid

Hey,

thanks so much for this project!
Looks great so far and I'm looking forward to everything that's coming. 🚀

While using Milanote.com I was thinking if there's a way for you to add some kind of micro-grid (every X pixels) in a HTML canvas via <div class="canvas" style="position: relative; height: 1000px; width: 2000px"> (note: not <canvas>) where one would be able to drop elements and they'd autoalign (via top & left pixel values).

Milanote is using react-dnd for this and unfortunately there is no package for Vue 3 that comes even close to the features it ships. And I don't know how actively maintainer vue-draggableis. But if you can make something like this, that'd be really awesome.

Just a suggestion. 😊

Fix with scale transform

Hi! great repo, I have been trying to use this repo with my already working vue3dnd project, my issue is I cannot seem to be able to use css scale or transform: scale() succesfully, what I have been trying to test out is changing the library clientx and clienty mousemove functions, but after building the @next from git the build is not working, either way is there a way I can get scale to work, so you can zoom in out on elements?

Add a way to disable dragging for specific item

Can we have a way to disable dragging for a specific item base on item's property?

One of the use case is to call API at the end of the drag-drop operation, we should prevent the item being dragged around while waiting for the API call to complete.

Vue 3 - "createElement is not a function"

related to #18
on a new vue 3 project installing yarn add vue-dndrop@next .

import { Container, Draggable } from "vue-dndrop";

vue-dndrop.esm.js:2892 Uncaught TypeError: createElement is not a function

Demo source code doesn't seem to work

I copied the demo source code from this page https://github.com/amendx/vue-dndrop/blob/master/docs/src/pages/cards.vue along with helper functions and some CSS. The elements looked identical as demo and can be dragged, but when I dropped them, they went back to the original place. I opened the console and tried to debug, I noticed that dragStart was not triggered console.log("drag started"); like the demo does. Could you help me figure out the issue? Thank you!

Bug: Latest version not working with Vue 3

After upgrading from version 1.2.7 to 1.2.8 the libary isn't working anymore. I get a "createElement is not a function" error:

For now, downgrading to 1.2.7 is fixing this.

in Dialog or Modal the drag maybe cause position offset

Hi @amendx

First, its awesome repo thanks a lot.

But i Found a problem in some need

look my picture

the count 1 is my cursor true position
the count 2 is the drag baby position

the positon has offset

this is demo link

i found a repo like your repo vueSlicksort
the vueSlicksort provide a appendto props in his SlickList Component like you Container Component
how can i solve the offset question?

thanks again.

Nesting question

I'm curious how feasible it is to allow Draggable to be any descendent of Container rather than a direct child.

typescript @types issue

When installing the library in my Vue application, I get the next error Cannot resolve definitions for module 'vue-dndrop' seems like it's missing types declaration, can it be solved somehow? Thanks in advance

Support tag cloud layout / orientation

Hello - first, a most excellent library! Thank you.

My usecase would be to render two groups of tags, and let dragging between them. A group would look like a tag cloud, the tags continuously overflowing over the lines.

Currently vue-dndrop Container has vertical or horizontal orientation, but doesn't let overflow.

I tried to hack with display: flex and flex-flow: wrap on the Container, which works for the layout, but when dragging around, positions of the holes are (unsurprisingly) weird.

I wonder if this could be supported? Thank you!
Robin

Console error when two instances are mounted

Scenario:

• Using micro frontends when two MFE are using this package
• Mount this component from MFE 1
• Unmount MFE 1
• Mount MFE 2 and do dnd
• console error is occurred

This happens because in src/utils/container/mediator.js
grabEvents listenters are registered but not remove when component is destroyed - so MFE 1 is still listen to the event but the component already destroyed

Trouble with scrolling on mobile devices

On mobile devices, when user tries to scroll the page with draggable elements, event of adding classes to body fires right away without default delay (200ms), and classes not removed after scrolling end. It causes blocking page scrolling. You can try it on your example in chrome. I attached gif with reproducing of this bug.

.

Issue about dragging the item to the last row of the table.

Hi,

First a great and easy to use plugin.

Second, I followed the example at here https://amendx.github.io/vue-dndrop/examples/table-drag.html. I found out that if I want to drag any item to the last row of the table, it just 'bounces' back to original position. It also happens in the demo from the documentation. Is there any way to fix it?

I tried this fix here #24 but I guess it's not really related to my issue though.

I have also read some sites saying I can change the container height, but not so sure how to actually do it. It would be awesome if you could give me a little bit more detailed description. Thanks!

Getting the Container that a Draggable was Dragged into.

Hi there!

Is there a way to get the container that the draggable was dragged into? I'm creating a dashboard that allows widgets to be sorted per user choice. Any help is appreciated! Thanks!!

Identify drop container when using multiple containers

I am trying to use vue-dndrop to implement dragndrop between cells in a data table.
Imagin you have 12 boxes (a table with 4 rows an 3 cols) and in each cell you have a number of beans. I want to drag and drop the beans between the cells.

Each bean is a draggable. Each cell is a container (as draggables have to be direct children of a container).
So I have a data-table with 12 containers.
The containers and the draggables are generated by v-for's so they share the same event code.
(Actually the rows of the table a generated by v-data-table and the cells in a row are generated by a v-for).

I managed to identify the pick up cell for the drag using your suggestion:

              <Container
                  :get-child-payload="(idx) => getChildPayload(row_idx, col_idx, idx)"

When trying to do the same to identify the drop cell (container):

              <Container
                  @drop="onDrop(row_idx, col_idx, $event)"
                  :get-child-payload="(idx) => getChildPayload(row_idx, col_idx, idx)"

Within 'onDrop' I only get the coordinates (row_idx and col_idx) of the start of the drag (the source cell) and not of the drop (the destination cell).
With that my onDrop-function is unable to drop the dragged item in the correct cell in the data-table..

What am I doing wrong?