How to highlight the potential drop areas in sortable before drop?

Question

I'm using JQuery's Sortable (not Draggable or Droppable) and I was wondering how I could highlight the potential drop areas (using CSS) that a user has when the user has begun sorting. Something like

http://www.shopdev.co.uk/blog/sortables.html

but with highlighting the area in which the item can be dropped.

Answer 1

Use the Placeholder option to define a css class to apply to the default white space

  placeholder: 'someClass'

Demo here

You can also use the change event and override the inline visibility hidden that the sortable applies to the placeholder.

See quick demo here

$("#sortable").sortable({
    change: function(event, ui) {
      ui.placeholder.css({visibility: 'visible', border : '1px solid yellow'});
    }
});