CODEWITHSUNDEEP
jqueryjquery-ui
Nick Olsen
Nick Olsen

Reputation: 6379

JQuery UI Sortable Buttonset

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?

Upvotes: 2

Views: 337

Answers (2)

jkraybill
jkraybill

Reputation: 3409

For what it's worth, since I came across this question when trying to find a similar apparently unanswered issue - how to sort out the rounded corners - here's what I came up with. I'm sure there is a more efficient way to do it, but this works.

$("#radioset").sortable({
    stop:function(event, ui) {
        $("#radioset .ui-corner-right").removeClass("ui-corner-right");
        $("#radioset .ui-corner-left").removeClass("ui-corner-left");
        $("#radioset label:first").addClass("ui-corner-left");
        $("#radioset label:last").addClass("ui-corner-right");
    }
});

Thank you Steve Wilkes since your answer answered the other part of what I was trying to address :)

Upvotes: 2

Steve Wilkes
Steve Wilkes

Reputation: 7135

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 :)

Upvotes: 2

Related Questions