How do I highlight a droppable area on hover using jquery ui draggable

Question

I actually have two questions, the on in the title being the main one. I have multiple div elements on the page marked as droppable. Inside these div elements I have spans that are marked as draggable. I want it so when you are dragging an element and it is hovered over a droppable area that area either highlights or has a border so they know they can drop it there.

As secondary question, all my draggable elements have a display:block, a width and a float on them, so they look nice and neat in my droppable areas. When items are dropped they seem to get a position set to them as they no longer float nice and neat like the rest of my items. For reference, here is my javascript.

$('.drag_span').draggable({     revert: true }); $('.drop_div').droppable({     drop: handle_drop_patient });  function handle_drop_patient(event, ui) {     $(this).append($(ui.draggable).clone());     $(ui.draggable).remove(); } 

Answer 1

Check out http://jqueryui.com/demos/droppable/#visual-feedback.

Ex:

$( "#draggable" ).draggable(); $( "#droppable" ).droppable({     hoverClass: "ui-state-active",     drop: function( event, ui ) {         $( this )             .addClass( "ui-state-highlight" )             .find( "p" )                 .html( "Dropped!" );     } }); $( "#draggable2" ).draggable(); $( "#droppable2" ).droppable({     accept: "#draggable2",     activeClass: "ui-state-hover",     drop: function( event, ui ) {         $( this )             .addClass( "ui-state-highlight" )             .find( "p" )                 .html( "Dropped!" );     } });