CODEWITHSUNDEEP
javascriptjqueryhtmlbutton
Ryan Sayles
Ryan Sayles

Reputation: 3431

Moving buttons in webpage

I am making a site that has a grid of buttons, I was wondering what the best way is to make those buttons re-organizeable. I would like to keep the layout of the grid just swap positions of the buttons via a drag and drop function. I'm assuming there is some javascript/jquery way of doing this but I'm a little rusty.

Upvotes: 0

Views: 112

Answers (4)

Vinc 웃
Vinc 웃

Reputation: 1247

I recommend you to use jQueryUI, it is simple to use.

Just use this function :

$(function() {
   $( "#sortable" ).sortable();
   $( "#sortable" ).disableSelection();
});

And don't forget to link the external script and css.

Here's an example : jsFiddle.

Upvotes: 1

Chinciusan Marian
Chinciusan Marian

Reputation: 25

I also recommend jQuery UI as an easy way to do it. Check the Sortable interaction http://jqueryui.com/sortable/

Upvotes: 1

Simon Dragsbæk
Simon Dragsbæk

Reputation: 2399

You could use Isotope if you wanna sort then by category and as an extra feature this make it possible to have different sizes

You could go for the version like with jquery but with out jquery: Masonry Vanilla

This also allow browser resizing

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

For that you need something like draggable and snap to that particualar area where the drag should stop.

You can refer to Jquery UI for it.

To suit your needs perfectly, here is the actual drag and drop to the snap object

Hope this helps now.

Upvotes: 0

Related Questions