JQuery UI Sortable Buttonset

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?

Steve Wilkes · Accepted Answer · 2011-11-20 17:55:14Z

2

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

edited Nov 20, 2011 at 17:55

answered Nov 18, 2011 at 23:38

Steve Wilkes

7,1433 gold badges31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Olsen Over a year ago

That works great. I was just trying to get it to work and was thus working with inline styles on the div elements and for some reason if you specify inline float styles on the inner divs not in an external css file you get funky behavior. Check it out: jsfiddle.net/7nZRM

Steve Wilkes Over a year ago

How very odd! CSS baffles me sometimes :)

jkraybill · Accepted Answer · 2012-03-30 07:06:41Z

2

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

answered Mar 30, 2012 at 7:06

jkraybill

3,4091 gold badge30 silver badges32 bronze badges

Collectives™ on Stack Overflow

JQuery UI Sortable Buttonset

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related