user1261774 user1261774 - 1 year ago 54
Javascript Question

Apply a different color to the selected sorted item

I am testing jQuery sortable.

I have a sortable list that is working, but how do I apply a different color to the the selected item that is being dragged?

This is different to the placeholder color.

I am hoping to apply the css class

to the selected item as shown below.

I have searched SO & Google, and tried a few things, but cannot get this to work.

Here is my code:

#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; border: 3px dashed red; background: yellow; }
.ui-state-focus { border: 2px dotted orange; background: lime; }

$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
$( "#sortable" ).disableSelection();

Thanks in advance.

Answer Source

I've tried it just now.

I found that the item which is being dragging has the classname ui-sortable-helper added.

So you can just add few lines to your css file:

.ui-sortable-helper { // original and wrong code: .ui-sort-helper
  background: red;
  color: green;