How to highlight potential fall areas in sorting before falling?

Question

I am using JQuery Sortable (not Draggable or Droppable), and I was wondering how I can highlight the potential selection areas (using CSS) that the user has when the user starts sorting. Sort of

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

but with highlighting the area in which the element can be discarded.

Answer 1

Use the Placeholder parameter to define the css class to apply to empty by default

placeholder: 'someClass' 

Demo here

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

Watch the demo here

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

Answer 2

redsquare inline CSS style when changing worked for me, but I couldn’t get it to work using custom CSS class. Updating the jQuery placeHolder class in the configuration caused some oddities for me.

You can use the following CSS without any other configuration updates to get the desired result. Note that visibility requires !important .

 .ui-sortable-placeholder { border: 1px solid rgb(12,194,170); visibility:visible !important; } 

Answer 3

Specify a class with many classes to override the inline style:

 .ui-sortable-placeholder.ui-sortable-handle { border: 1px solid blue; visibility: visible!important; }