CODEWITHSUNDEEP
jqueryjquery-ui
DesignerUXTX
DesignerUXTX

Reputation: 114

Sortable List w/ Incrementing Values

Here is my fiddle:

http://jsfiddle.net/WV8du/24/

I would like for the numbers to increase/decrease based on the value/amount of items in the list. Thanks for the help/tips.

$(function () {
    $("#sortable-primary").sortable({
        placeholder: "ui-state-highlight",
        connectWith: ".connected-sortable"
    });
    $("#sortable-secondary").sortable({
        placeholder: "ui-state-highlight",
        connectWith: ".connected-sortable"
    });
    $("#sortable-primary, #sortable-secondary").disableSelection();
});

Upvotes: 1

Views: 25

Answers (1)

David Stetler
David Stetler

Reputation: 1451

I think you will need to put the items in one UL, this will certainly make it less complex. I didn't entirely clean up the CSS, but I think this will get you started. It is at least one solution.

function numberLi(){
  var i = 1;
  $('#sortable-primary > .ca-nav-move > .num').each(function(){
    $(this).text(i);
    i++;
  });

  $('#sortable-secondary > .ca-nav-move > .num').each(function(){
    $(this).text("");
  });
}

Here is the fiddle

Here is an updated fiddle, that will remove the numbers from the bottom list when dragged there.

I didnt like the way that looked with the numbers being dragged along with the item, I decided I could do better. Here is a 3rd fiddle that performs exactly the way you wanted it to. Please mark this as the accepted answer.

Upvotes: 1

Related Questions