rlemaigre / easy-dnd Goto Github PK
View Code? Open in Web Editor NEWA drag and drop implementation for Vue.js 2 and 3 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
License: MIT License
A drag and drop implementation for Vue.js 2 and 3 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
License: MIT License
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:
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
type-forbidden
class is indeed applied when the type is not accepted.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.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
Any hints on this ?
The bug happen as soon I drag an element
What I can tell so far:
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:
dragstart
fired globally?dragstart
handler and not all the others as well?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?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.