CODEWITHSUNDEEP
jqueryjquery-ui
DomingoSL
DomingoSL

Reputation: 15484

Sorting a list with jquery UI

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?

Upvotes: 0

Views: 84

Answers (3)

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

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

Upvotes: 1

user1713964
user1713964

Reputation: 1249

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

Upvotes: 0

Anton
Anton

Reputation: 32581

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

Upvotes: 1

Related Questions