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
Related
I am developing a simple website for a client using Rails and I want to give them an easy way to create and manage their top navigation menu. Wordpress has a great tool (see example below) for this but I haven't found anything like it that is generally available.
So far I am thinking that Jquery Sortable would be the best place to start but to make it handle nested data (like trees), adding and removing elements, and add rules such as limiting the depth of nested elements seems like a lot of work.
How have you guys gone about solving this problem?
Have you tried this
You can initialize like
$(function () {
$("ol").sortable()
})
It also supports animation.
You can also take a look into the alternatives provided
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'm wanting to rearrange table columns dynamically.
I can do the actual rearrange but for the dragging of the header cells I'm wanting something that feels like jqueryui's sortable elements with the placeholder http://jqueryui.com/demos/sortable/#placeholder (obviously horizontally rather than vertically though)
The problem is that I don't want to use jquery (javascript is fine but jquery is too heavy), does anyone know of something more lightweight that does the same thing?
Anything that can handle the complexities of drag-and-drop is going to be big. JavaScript libraries usually try to solve simple things, like DOM selectors and AJAX, then other UI functionality, like sliders, animation and drag-drop are added on top of these.
So finding small a library that does the drag-and-drop alone is unlikely. There are alternatives, such as Scriptaculous, but you'll find they aren't smaller.
Keep in mind that jQuery isn't all that big - smaller than many images you'd use on your site. It is also cached by the browser, so it doesn't have to be downloaded with every page load.
Check out http://microjs.com/ Type in what you need and it will help you narrow down a list of libraries.
Take a look at this:
http://www.switchonthecode.com/sites/default/files/99/source/SOTC-DnDLists.js
It's not horizontal but I'm sure it can be worked with...
[update: Indeed, minor modifications made this work like a charm - code will follow]
I was wondering whether anyone knew of a JavaScript alignment system like the one on this page: http://trilancer.com/jpolite2/index1.html where you can drag the modules on the page into place? Thanks in advance.
jQuery UI Sortable provides something pretty close to this.
See the portlets demo here.
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.