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
Related
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
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
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
I am developing a search form which displays a number of categories and sub-categories. The client has requested that I do not use cascading dropdowns but to display radiobuttons instead so that the user can see the top level categories at a glance.
I had a bit of a look around for any javascript plugins that might give me a head start and save me from having to write all of the code from scratch but didnt come up with too much.
Can anyone suggest a good plugin that will allow me to display a radio button list in a hierarchical collapsible tree structure?
Cheers,
Tristan
Solution
I ended up using this plugin and adapting it to my own needs -> http://code.google.com/p/checkboxtree/
There is a great jQuery plugin called jsTree.
http://www.jstree.com/
I personalize it for my needs as well.
I'm looking to utilize jQuery to handle a few very common requests we get for data tables of varying sizes: scrolling, sorting, and dynamic filtering.
I've handled scrolling in the past by having two separate tables with fixed width columns, along with associated div containers for the "actual" scrolling. However, this method doesn't work with any of the jQuery-based sorting table extensions that I've come across (tablesorter being my favorite so far) as they want everything in a single table.
For filtering, they're requesting something akin to how Excel and SharePoint lists do it (basically all column values are listed in a dropdown, allowing the user to select/deselect them). I haven't seen anything like that yet, although it sounds possible.
One other related nice-to-have feature would be the ability to "freeze" a column for horizontal scrolling.
Ideally I'd like an existing extenstion, but if none are out there I'd also appreciate suggestions from any jQuery gurus on how to best implement it. My current thoughts are to dive into tablesorter and extend/update it as necessary.
To hopefully keep things focused, paging is not an option (along with anything server based, for that matter).
Update:
I do appreciate the answers so far, but none of the options given so far touch on the filtering aspect at all (that said, I must admit that jqGrid looks very good for some future projects I have). In the meantime I'll work on a custom filtering solution; if it works out I'll update again.
I came across this question as I was searching for a sortable table plugin myself; I really wasn't impressed with any of the suggested widgets, but later I discovered DataTables, and I was quite impressed. I recommend checking it out.
Maybe this excellent plug-in could do it:
Demo page
It's called jQGrid, here is the project page:
http://plugins.jquery.com/project/jqGrid
I would encourage you to try out the Flexigrid.
It has a lot of great features and I personally think it looks more professional than the jqGrid.
It doesn't have some of the features that you asking for, but I think it could be a good start. It would be great if you could work on adding some of those features to the code base.
If you are coding in c#, then I posted a blog entry about how to use LINQ to Reflection to bind JSON to the Flexigrid... if you are using another language there are other examples you can find on Flexigrid's Website & Google Group page.
a simple jQuery Scrollable Table Plugin
As mentioned in my update, I ended up using a custom filtering extension (closed source, unfortunately). I've recently started using SlickGrid and it's now my go-to grid.
I'd like to add the Laravel flavored DataTables (GitHub, jquery DataTables API) - perfect if you already work with PHP/Laravel.
Extra, koalyptus/TableFilter another custom filter table (actually, my fav).