Question

I’m trying to combine the jQuery sortable interaction and the buttonset widget to make a sortable buttonset. Here is a jfiddle that tries to do it: http://jsfiddle.net/HK7rX/3/.

The first one just calls buttonset and sortable on the same div. It kinda works but when you try to move the buttons it makes the list jump around and it is difficult to move the buttons to the first or the last position.

I then tried to just create a ul with a button in each li but the sortable portion doesn’t work at all. I presume that has something to do with the button click event overriding the calls to the sortable events.

Then I tried the same thing above but it failed even worse.

The first attempt works the “best” but still has some problems. Any ideas on how to get the mix of the buttonset (so the buttons act as radio buttons) and be able to move them around in a different order?

Answer 1

I’ve made a reasonable start here, starting from your first example. All I’ve done is put all the radio input / label pairs inside their own floated divisions, and it makes the sorting smooth.

Now all you need to do is sort out the rounded corners on the buttons 🙂