jquery ui sortable placeholder cannot change background colour

Question

I can successfully change the border colour of the placeholder, but when I try change the background colour, nothing happens.

This jsfiddle code best explains it: http://jsfiddle.net/EUVrK/1/

Fairchild

Answer 1

According to the jQuery UI Sortable Documentation you can provide a css class for the placeholder. You should be able to specify the background in this class.

Using the placeholder and the forcePlaceholderSize property, it works like a charm. I've updated the jsfiddle link

Hope that helps.

Himalayas

Thanks for taking the time to help p0wl. This solution does indeed work. However it uses a different code layout / structure to the one I was after, ie: it requires separating the styling into a CSS class and inheriting the width parameter with foreplaceholderSize set to true. Sure, it does the trick, but the solution outlined in my other answer (courtesy of someone else on IRC) only requires one extra line of jQuery code to be added to the code in the original question. It's quite elegant. Perhaps you found it useful too? Thanks anyway :) – Fairchild

You are quite right, but it depends on the point of view. I like to seperate between javascript and css. Although the use of a standard parameter of jquery-ui can have a advantages (read it using a get method for example). – Himalayas

Yeah separating Javascript and CSS the way you have done is certainly better practise. As such, I'm going to vote your answer as the correct one (because the question's title makes no reference to low-level tweaking of ui.placeholder). – Fairchild

Answer 2

I got some help from a friend on irc.freenode who suggested the following solution which does the trick.

ui.placeholder.css("visibility", "visible");
ui.placeholder.css("background-color", "red");

The background colour of the placeholder wasn't showing up because the actual element wasn't visible (I suppose it's set to hidden by default). So setting it to visible allows one to see the different background colour.

Fairchild

Very nice. This is perfect. – Posy

You can also shorten this by doing ui.placeholder.css({"visibility":"visible","background-color":"red"}); – Posy

This code should be placed in the start sortable event. start: (e, ui) => { ui.placeholder.css('visibility', 'visible'); ui.placeholder.css('background-color', 'red'); } – Drye

Answer 3

CSS

.placeholderBackground{background-color:#FD6FB7;}

PARAMETER

$('.sortable').sortable({
axis: 'y', placeholder: 'placeholderBackground'
}).disableSelection();

Mania

Answer 4

With css

.ui-sortable-placeholder {
  background-color: yellow;
  visibility: visible !important;
}

Corriveau