Sorting list but retaining the CSS markup

Question

Introduction

I currently have a list (with ul and li's).

It's made sortable using jQuery:

$( "#sortable1" ).sortable({
    update : function () {
    var items = $('#sortable1').sortable('serialize');
    alert(items);                       
    }
});
$( "#sortable1" ).disableSelection();

The problem

This code moves the complete li item (including it's class - and thus it's markup).

The question

Is there any way to match the target's destination class? I've setup a demo here: http://tinker.io/65292

So basically, when moving item 1 one place down, item 1 should become green and item 2 should become red.

Additionally, when moving item 1 two places down, item 1 should be yellow, item 2 should be red and finally item 3 should be green.

This demo list only exists of four items, but realistically this could be any number.

Demo code

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }

    .first { background-color: red; }
    .middle1 { background-color: green; }
    .middle2 { background-color: yellow; }
    .last { background-color: blue; }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>
</head>
<body>

<ul id="sortable">
  <li class="first"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="middle1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="middle2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="last"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>


</body>
</html>

Link: http://tinker.io/65292

superUntitled · Accepted Answer · 2013-04-10 15:36:22Z

3

Use the nth-child css pseudo-class...

 #sortable li:nth-child(1) { background-color: red; }
#sortable li:nth-child(2) { background-color: green; }
#sortable li:nth-child(3) { background-color: yellow; }
#sortable li:nth-child(4)  { background-color: blue; }

answered Apr 10, 2013 at 15:36

superUntitled

22.6k30 gold badges86 silver badges113 bronze badges

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

1 Comment

Devator Over a year ago

Thanks, however I chose adeneo's answer due to the fact he points out the first-child, last-child plus he was slightly faster than you.

adeneo · Accepted Answer · 2013-04-10 15:36:29Z

2

Change the css to target list elements based on index, and not class, and it will update automatically:

#sortable li:first-child { background-color: red; }
#sortable li:nth-child(2) { background-color: green; }
#sortable li:nth-child(3) { background-color: yellow; }
#sortable li:last-child { background-color: blue; }

TINKER

answered Apr 10, 2013 at 15:36

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

drquicksilver · Accepted Answer · 2013-04-10 15:39:02Z

1

jQuery UI's Sortable is based on the principle of moving entire DOM elements around.

As you correctly notice, the whole DOM object is moved including all its contents and all its attributes and, hence, its classes.

A couple of approaches occur to me:

change your CSS so that it doesn't require classes on the <li>s. It is possible to use pure CSS to make the first red, the second green, etc etc. You can use nth-child or + or ~ selectors in various ways. Then moving the <li>s around is fine and the appearance when they drop into place will be right.
Use javascript to remove and reapply the classes directly after each element move.

answered Apr 10, 2013 at 15:39

drquicksilver

1,6359 silver badges12 bronze badges

Collectives™ on Stack Overflow

Sorting list but retaining the CSS markup

Introduction

The problem

The question

Demo code

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Introduction

The problem

The question

Demo code

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related