rlemaigre / easy-dnd Goto Github PK

Hi. I'm using your component and so far it's been a pleasure to work with.

I'm having an issue when using the DropList component with a table and rows. I'm using the DropList with the tag set to tbody. If there are no items available, I would like to display an empty row (<tr>). The problem is that the default slot for DropList is wrapped in a div container: <div key="drop-list-content"></div>. As a result, my tr is within a div within the tbody and therefore does not display.

I can somewhat get around this by using the template tag instead of a tr and then targeting tbody>div and setting display: table-row but it would be much better if the DropList had the option to disable this div wrapper or if there was another slot (without a wrapper) to display content when there are no items.

I hope you can get around to updating this. In the meantime I'll just hack around it. Thanks for making this library!

Could be great to be able to drop from parent to an iframe

Hello, is it somehow possible to update UI right before drag event will start?
What I try to do: I have DropList, that has components, that can be collapsed/expanded. I want to collapse my components for better dragging experience. If I update UI using dragstart - event, reordering is wrong, because it uses component sizes before the UI update.

Hi,

There seems to have an issue when dragging and scrolling at the same time, when a DropList gets too big that we have to scroll when dragging to drop an component at the bottom, the component does not drop at the mouse cursor position.

Anyways, i have always been a fan of this drag and drop it is very easy to implement.
Thanks in advance, hope to get reply from you on this issue.

On DnD in console log appears error: TypeError: Cannot read property 'cloneNode' of undefined and Error in nextTick: "TypeError: Cannot read property 'cloneNode' of undefined".

I love how it works, I am currently working on a React project, dnd is always a problem, I would love to use easy-dnd.

I am having issues with dragging a single row (not selected with checkbox) to a drop list. The issue is that it ends up dropping an empty object. I added the dragstart event and it too has an empty object in data. Is there a way to drag from a data table without checking the check boxes as in the demo? Also even the demo lets you grab a row without selecting the checkbox and get this issue.

The "Types" section (https://github.com/rlemaigre/Easy-DnD#types) says:

As far as Easy-DnD is concerned, if a Drop component doesn't accept the type of the current drag operation, it behaves like any other part of the page that is not sensitive to drag and drop. It is ignored during the drag, no special CSS classes are applied, no special cursors / drag images are displayed and no special events are triggered.

The accented part - "no special CSS classes are applied" - is not particularly correct since:

1. the "CSS classes" section (https://github.com/rlemaigre/Easy-DnD#css-classes) says:

During a drag operation, the Drop components on the page are assigned several CSS classes :

• for all Drop components : type-allowed if the Drop component accepts the type of the drag operation, type-forbidden otherwise

2. type-forbidden class is indeed applied when the type is not accepted.
3. drop-out class is additionally applied => this seems like a bug since the "CSS classes" section says that drop-in and drop-out are applied only when type is accepted by the Drop component.

https://codesandbox.io/s/example-3-g7io8

I'd like to disable this behaviour because it's causing some issues
I've tried defining the DropList>reordering-drag-image slot but it seems to have no effects

First element is a droplist, then I add a button to it, then a container (which is also a droplist) then a button inside the container
It all works fine
Then I try to put the button inside the container, outside of it

1. It crash
   
2. Before crashing, it doesn't seems to detect dropable zones as I have css coloring drop-allow and drop-disallow

Any hints on this ?

The bug happen as soon I drag an element

What I can tell so far:

• Without drag-image slot, no errors
• With empty and filled drag-image slot, errors
• I have a tag prop on the drag element, without it works fine

Conclusion tag + #drag-image = error

Can't reproduce on codepen, might be my setup
Any tips from where i could come from ?

Hi

I have a setup that was working with version 1.3.17 but no longer works with 1.5.2

Inside the drop component I am using a different component 'vue-responsive-dash' dashboard that processes mouse move events.

However after the update to 1.5.2 it appears the dashboard component is no longer getting mouse move events while the item is being dragged in the drop zone with the left mouse down.

I noticed you have changed from using mouse enter / leave to mouse move messages.
Is it possible the mouse move events are not getting passed to child components.

I have replicated the issue here.
https://codesandbox.io/s/vue-responsive-dash-051ng?file=/package.json

If you drag the item at the top into the dropzone, and keep the mouse down you can see the box moves around with the mouse. (using "vue-easy-dnd": "1.3.17")

However if you change the package to be "vue-easy-dnd": "1.5.2"
When you drag the item the box doesnt move around anymore, like the dashboard is not getting the mouse move events.

Any ideas ?

Regards
Peter

Uncaught TypeError: Cannot read property 'dispatchEvent' of null at HTMLDocument.onMouseMove (vue-easy-dnd.esm.js?fdcb:331)

This happens whenever a user drags a drag element off-screen. Should be an easy fix tho

EDIT: This only happens on mobile devices (aka touchscreens)

Hello,

It's possible to drag and drop element to another element? Like for example, drag folder inside another folder.

Thanks! :)

When using easy-dnd in a scrolled browser window, the drag image isn't positioned at the mouse cursor, but offset by the scrolled distance (screenshot 1).

I played around a bit and found a works-for-me solution: when changing the startDrag-function to:
...
this.position = {
x: event.pageX - window.scrollX,
y: event.pageY - window.scrollY
};
...
everything works fine, even when scrolling while dragging (screenshot 2).

Can that change be incorporated or does that break any other functions?

I read the linked article and looked at the examples. I'm curious if the library supports drag-selects and if so, how might one go about doing it.

I noticed that the dragstart event on a Drag component is emitted for all Drag components in the application, it is not emitted per component but rather globally.

What I mean is:

Imagine we have 3 Drag components registered anywhere in the application (no need to be in the same parent component) and all these 3 components have @dragstart listeners attached to them, e.g.:

...
<drag ref="one" @dragstart="handleDragStart1" />
...
<drag ref="two" @dragstart="handleDragStart2" />
...
<drag ref="three" @dragstart="handleDragStart3" />
...

Whenever I drag any of them (for example, 'two') all 3 drag components receive the dragstart event and all 3 event handlers are called (handleDragStart1, handleDragStart2 and handleDragStart3).

https://codesandbox.io/s/naughty-pascal-rjioj?file=/src/App.vue

Is this behavior by design or is it an oversight?

If it is by design then:

1. What would be the use cases for having dragstart fired globally?
2. I believe this behavior should be more clearly stated in the README.
3. What can I do to guarantee that, for example, dragging component 'one' will call only its own dragstart handler and not all the others as well?

Hi, this is just what I need! but I can't run the DropList example

I'm using nuxt and vuetify. thank you

I create 2 list without the feedback template(I dont want that it shows) and getting an error.
The error it's the same as in #1, maybe related.

https://codesandbox.io/s/error-without-feedback-jevl5?file=/src/App.vue

It would be very useful if during dragging the library could add a class to the closest Drop component based upon current mouse position. This would enable the use of invisible Drop targets which become visible when the drag object is close to them.

An example use-case is for linear drop targets that act as spacers between elements that would be invisible in normal situations but provide clear feedback to the user in insertion operations.

Lastly, this is a very nice library, thank you for your work - it fills a hole for vue drag and drop libraries that get out of your way and don't assume structure.

Hello,

I need to access to 'native event' data on events.
standard event like "click" allow to use parameters on callback and $event variable
to send standard event to callback.

I'm unable to achieve it with DND events.

Can you give me an hand?

This library saves me a lot of time and has pretty API to work with. I like it. But it does not support IE11 browser :( Having such possibility would be very nice.

When accessing the {{data}} prop within the drag-image slot it’ll give an error.

<template v-slot:drag-image="{data}">
    <div>
        <p>{{data.length}}</p>
    </div>
</template>

In an earlier Version 1.2 as used in the example it’s working.

Hello sir, i am using your package. But problem is that my drag component and drop component is on different component of the page. The behavior is totally different when dragging or drooping in Firefox and on chrome. Chrome is doing the expected behavior but firefox is different when i drag and an item and and release the mouse. I have to click to drop the item. Why ?
The Drop event is not executing in firefox.

Could I create a nested tree of draggable elements, using Easy-DnD?

My use case is as follow:

When I click an element, a toolbar appear on top of it
This toolbar is next to my root (so not inside) the element

I've readed a bit of the source to find that: https://github.com/rlemaigre/Easy-DnD/blob/master/lib/src/mixins/DragMixin.ts#L49-L51
Handles are queried on mounted

As shown in my case, I have a single toolbar component, and the handle is on demand, relative to the selected element. Also, at the 'mounted' time, the handle doesn't exist

What could be great is to have lazy handles, only evaluated when a drag operation start. Only at this time, the handle will be queried

An other addition could be

- el = this.$el.querySelectorAll(this.handle)
+ el = document.querySelectorAll(this.handle)

to allow any item to be used as handle, anywhere in the page
(I've tried that, but in my case, I had to use a class and it resulted in every items matched to be move)
The key here, for my use case is dynamic handle only available when drag start

I may work on a PR for this but maybe you'll be faster

Thanks!

Working with VUE 3.0.0 and when importing into my component the whole app goes blank.

Is there a way to have a drag handle (sub only sub element is draggable) ?

I think a boolean prop to allow disable the drag n' drop will be useful.

What you think?

Hi,
I added optional buttons to show on hover, as such:

<template v-slot:item="{ item }">
  <drag
  tag="generic"
  :model="item"
  :key="key(item)"
  :data="item"
  @cut="remove(item)"
  @mouseover.native="startHovering(item)"
  @mouseleave.native="stopHovering(item)"
  class="relative"
  v-on:delete="deleteChild"
  >
    <div v-if="showButtons === key(item) && $edit.mode" class="absolute top-0 right-0">
      <v-btn
      class="mx-2"
      fab
      dark
      color="indigo"
      v-if="item.items && item.items.length > 0"
      >
        <v-icon dark>
        mdi-plus
        </v-icon>
      </v-btn>
      <v-btn
      class="mx-2"
      fab
      dark
      color="red"
      @click="remove(item)"
      >
        <v-icon dark>
        mdi-minus-circle
        </v-icon>
    </v-btn>
  </div>
  <template v-slot:drag-image>
    <div class="drag-image">DRAG</div>
  </template>
  </drag>
</template>

(Image just looks better, right?)

And I've noticed there's been this error, repetitively showing whenever I attempt to drag children:

[Vue warn]: Error in event handler for "dragtopchanged": "TypeError: Cannot read property 'childElementCount' of undefined".

The error does not stop the code from working and I can still do what I've set off to do, but it's just annoying to deal with.

Great job with the library, thanks a bunch.

Reproduction: https://codesandbox.io/s/easy-dnd-demo-rr0qe?file=/src/App.vue

On the reprodcution you can see prop type error for the tag prop
On my project (can't exactly reproduce on codesandbox), I'm passing it the same way but the value is a function (Nuxt SPA mode)

Inside the component (https://github.com/rlemaigre/Easy-DnD/blob/master/lib/src/components/DropList.vue#L54), tag accept String and Object but should also accept Function

Version 1.8.2

<drop-list :items="data_items" @reorder="$event.apply(data_array)" @insert="insert" mode="cut">
        <template v-slot:item="{ item }">
          <drag :key="item" :data="item" @cut="remove(data_array2, item)" @dragend="dragAwayDrop">
...
          </drag>
</drop-list>

when checking @Dragend event success it return false when failed but on actual success returns:

function(){return true}

Thanks for your effort with this library!

Is it possible to change the threshold of when two items should swap places?

In the image below "2" is being dragged upwards towards "b". I'd like "b" and "2" to swap places only once "2" completely (or almost completely) covers "b" vertically (instead of when it covers for example 50% which is what I believe it is now).

Is this possible to accomplish?

Hi!

Its possible drag between two or more lists? I see the example that its from a drag to a drop-list, but I want can drag bewteen the lists.

For context, I try to make a solitarie.

Thanks and amazing lib!

I was just evaluating dnd support for my app and have found your solution.
I love it so far, but noticed it doesn't work at all with touch.
Shouldn't be much hassle to fix this, by adding touchstart, touchmove and touchstop events handling.

Hi.

How can I restrict the drag and drop on certain div only? One of the examples will be handle in vue-draggable.
https://sortablejs.github.io/Vue.Draggable/#/handle

I am a big fan of Easy-DnD. Hopefully, this feature can be added also.

Hi,

I'm using Vue 2.5.17, when importing with import { Drag, DropList } from 'vue-easy-dnd';, it returns:

TypeError: vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__.Vue.observable is not a function

The strange this is, although I've upgraded Vue into 2.6.11, I still am getting the issue.

Hey there, thanks a lot for the library, awesome code.
I'm trying to make a form builder, much like WYSIWYG editor of the example.
A good benchmark is Jira custom issue fields, as the gif bellow:

I could replicate the examples with no problem, but I'm having a hard time dragging components, while having the handler with a different image, what I mean is: on the right side I have the "components type" like a checkbox, a text etc. And when I drag them, they appear at the form as the component itself: the checkbox, the textbox etc. When I try to that, I would get the components' text.

Any ideas or examples that I could use? Thanks!

Hey, we spoke on the Vue forum.

I tried making this work but I keep getting the following: #1

I did do what one of the comments says which was to use the simple drop option which is fine, but this does not give any controls, like removing it from the previous place and hover controls to see where it will go.

So in my project, I need to drag and drop from a module list, and then the ability to move everything around within the page, so moving blocks from multiple children deep to any place required, but I was unable to get this to work in a way that was useful, I just kept getting the same error, I would also like to support the line that presents when dragging as this is much cleaner.

Any way we could collab to make this work, so I can also understand this more, as if I can get this to work in my prototype my company will most likely use it, so I just want to understand exactly how it works, as it's no where near as simple as vue-draggable which is fine, but I need to understand.

What I did was the following, I created a drop list, with a separate v-for loop inside of containers as my page builder uses a container system, where each container has it's own row and columns, allowing for much more custom designs of the layout, so there is really only one place I need to add support for the re-ordering of elements within the page, which is here and then the wrapper that wraps all normal page components, forms, lists, etc, etc.

So in my main container file, I did a drop list inside of the container row which inside of the drop list it has it's own div container that loops multiple times for each given column, then inside the column there will be another component, whether that being another container or an actual page component, regardless, I need to support moving the page component anywhere inside of other columns in other components, or to re-order the components already in a column, and then being able to move the columns, so moving them to the left or swapping two, etc.

Is it possible to have the dragging lock into Y axis? like this: https://kutlugsahin.github.io/vue-smooth-dnd/#/lock-axis?

I get a null object for the event data when trying to drag from a drop-list to a drop. The use case for this is I would like to be able to drag from a drop-list to a drop to then delete from the drop list while still being able to drop from a different data table into the drop list. Any way around this?

I would like to use it in the NuxtJs project. Is it possible?

The README says (https://github.com/rlemaigre/Easy-DnD#drag-image):

Easy-DnD makes it so that this image is always on top of everything else.

This is not always the case. Currently the z-index for the drag image is set to 1000 (createDragImage() in createDragImage.ts) which is not always above everything else.

Is there a way to manually set the z-index for the drag image for the cases when 1000 is not sufficient?

When using nuxt, in universal mode. When importing we get an error

Cannot use import statement outside a module

Hi

I was trying to do a render function implementation of Easy-Dnd Nested-list drag and drop (https://codesandbox.io/s/nested-drop-lists-nw605)

But I could not get it to work 100%

Here's my codepen -> https://4wuzb.csb.app/

I started recreating the Component->Flex.vue file...

But the output was different from the original

Does Easy-DnD have a special case for Render Function implementation?

Hi,

Is is possible to have a dynamic drag image (one that can be changed during the drag operation)?

Here is an example of what I mean - https://marcojakob.github.io/dart-dnd/custom_avatar/

Best regards.

When using an object in the :item portion of a drag component, the browser gives a Vue warn saying: [Vue warn]: Avoid using non-primitive value as key, use string/number value instead..

To reproduce, edit this example from the documentation, line 8, to read as follows:

<drag v-for="(n,i) in [{a: 1},2,3,4,5]" :data="n" class="item" :key="i">{{i}}</drag>

and drag the first item over.. this will give you the warning.

Is it me who is misusing the frameword, or is this indeed a bug?

Maybe you could provide us the demo file or codepen for the third example?