ReactJS drag and drop between multible tables - javascript

i looked for this all day but couldn't figured out how to do it, appreciate a little help, i have two tables and what i want is drag and drop of multiple rows between those two tables closest thing which i got is this by enclosing tr into the draggable component but i feel it is workaround is there better way to do it i have the solution in jQuery but i don't want to mix
jquery in my React application.

#techipank If you are not using infinite scroll, then you can use react-beautiful-dnd plugin to implement drag and drop between two links.
https://codesandbox.io/s/ql08j35j3q
Github link for package:
https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/about/examples.md
Hope this will help you. Thanks

Related

ReactJS Drag and Drop Between Multiple Lists

I've been searching all day and haven't found anything.. All the React libraries all seem to only sort between ONE standalone list.
The closest I found was this article: http://rafaelquintanilha.com/sortable-targets-with-react-dnd/
with this example: http://rafaelquintanilha.com/apps/sortabletargets/
The problem is that you have to drag the item to a different list BEFORE you can sort it. In otherwords you can't drag an item from one list to another list and also place the item exactly where you want in that list that your'e dragging it to.
Is there any sort of library that you guys know about or know just of any way I can accomplish this?
I desperately need this functionality for a work project. Thank you for any help
This library is what you are looking for:
https://github.com/atlassian/react-beautiful-dnd
But be aware that it doesn't support virtualization at this point in time. [UPDATE: Virtualization is now supported! July 2021]
Here is the example with source code:
https://codesandbox.io/s/ql08j35j3q

Re-arrangeable, Draggable , Sortable divs within grid

So think if a dashboard view, which contains different divs for lets say text blocks. I want the client(user) to be able to rearrange them in a X by Y grid system.
I have an idea about how to achieve this, but I am mainly looking for a library or a specific framework that can do this. Is anyone aware of any built solution?
I dont care about css framework bootstrap etc I can use any of them.
I think React JS is well suited for this.
Link to get started with sorting: http://webcloud.se/sortable-list-component-react-js/
Link to get started with dragging:
https://github.com/mzabriskie/react-draggable
UPDATE:
This seems to be exactly what you're looking for: https://github.com/STRML/react-grid-layout
Something like this?
jQuery Sortable UI:
https://jqueryui.com/resources/demos/sortable/display-grid.html
Apart from the great and quick answer from Turk. There are more options such as http://packery.metafizzy.co and http://gridster.net

wijmo wijtree child node re-ordering

I am facing difficulty reordering the child node of wijtree. I used drag and drop feature to apply order. The drag and drop is not that much efficient. Sometimes it fails to drag the item in to right place. can anyone provide an efficient way to implement drag and drop feature and reorder using wijtree.
i have seen an example of third party js plugin which provides a drag and drop solution. I need a similar or better solution using wij tree.
Thanks much.
Here is the link of that third party plugin:
http://dragsort.codeplex.com/SourceControl/latest
Can you elaborate more on the exact error/issue you are facing on using drag n drop feature of WijTree. I tried the following demo and it works properly at my end:
http://wijmo.com/demo/explore/?widget=Tree&sample=Drag%20&%20Drop
Moreover, is there any specific browser in which this issue occurs ?
Regards

How to create Sortable, drag and drop multi-level list in Javascript

I'm trying to create a multi-leveled list that is sortable by drag and drop. The user can grab an element and move it up and down the tree or drop it into other elements and have it become a child.
Are there off the shelf JS solutions? The jQuery sortable/draggable worked fine for a single level list but less so on nested solutions.
You can also try https://github.com/dbushell/Nestable (demo: http://dbushell.github.io/Nestable/).
Works with mouse and touch and this plugin is compatible with jQuery and Zepto.
I am using johnny's jquery-sortable plugin, which can be found here http://johnny.github.io/jquery-sortable.
It seems to work pretty well.
I was also trying to get it to send back the sorted structure of the list via AJAX. See this topic if you want to see my working solution, as the official documentation on serialization seemed slightly unsatisfactory (at least for nested lists).
Hope this is helpful.
So while you can use https://github.com/dbushell/Nestable or http://johnny.github.io/jquery-sortable
You probably want to move to something like React these days so you can use packages like this: https://www.npmjs.com/package/react-drag-sortable
Try not to use jQuery for this sort of thing any more. By the time you have drag/drop interfaces you have the makings of a webapp, not a web page, and you're going the wrong direction.
I have came to see a package named react-nestable and it works to create nested drag and drop. I am putting a link for that package below - react-nestable npm

Fullcalendar - Drag and Drop icons on event?

I am using full calendar plugin. This plugin has a feature that allows external events to be dragged and drop on the cell(for specific day). However, I am looking for a way to associate external icons(image) with the events in the cell using drag and drop feature. Here is the Link to jsFiddle that I have created. To be more specific, I am trying to associate documents with the users. The administrator should be able to drag a document and drop it on the user displayed on the calendar. Although I have managed to display the icons with the events but don't know how to drag and drop the icons on the events. It would really appreciable if someone helps to achieve this. Thankyou in advance.
Here is the solution that I found for my question jsFiddle Hope this will certainly help someone in need. Up-vote me if you find this solution helpful :)

Categories

Resources