Sorting a list with jquery UI

Question

Im using jquery UI sorting list to allow my users to select and order two lists and to change items between them.

If you are not familiar with jquery sorting, the actual code is very simple:

Html

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
</ul>

JS

 $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });

You can try it here: http://jsfiddle.net/9jQKu/

My problem is, if you empty one of the list dragging all the elements to the other one, you actually loose that column and you will not be able to return an item to the empty column.

How can I fix this?

ps. Also, why is not responding to the cursor:hand style?

cursor:hand is IE-specific. Use cursor:pointer instead.

Jason P
– Jason P

2013-09-25 12:52:42 +00:00
Commented Sep 25, 2013 at 12:52 — Jason P
– Jason P, Commented Sep 25, 2013 at 12:52

Dhaval Bharadva · Accepted Answer · 2013-09-25 12:54:07Z

1

Just replace your css with following:

#sortable1, #sortable2 {
  cursor:pointer;
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
  min-width:200px;

}
JSFIDDLE DEMO

answered Sep 25, 2013 at 12:54

Dhaval Bharadva

3,0852 gold badges26 silver badges36 bronze badges

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

Comments

Anton · Accepted Answer · 2013-09-25 12:51:34Z

1

Give it a width and min-height like this, i think this is the only way to fix the "bug"

min-height:250px;
width:140px;

DEMO

answered Sep 25, 2013 at 12:51

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Comments

user1713964 · Accepted Answer · 2013-09-25 12:52:52Z

0

In my humble opinion, I would just add this :

 #sortable1 {
  display:block;
  width:120px
 }

It keeps your ul list existing in the layout even if it has no li inside.

I tested it quickly on jsfiddle and it works :)

Also it's not cursor:hand, but cursor:pointer

answered Sep 25, 2013 at 12:52

user1713964

1,2592 gold badges15 silver badges26 bronze badges

Collectives™ on Stack Overflow

Sorting a list with jquery UI

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related