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

Answer 1

This should work for adding a highlight on hover.

$('.drop_div').droppable({
     hoverClass: "highlight",
     drop: handle_drop_patient,
});

Then create a css class for highlight that sets the border or changes the background color or whatever you'd like.

.highlight {
    border: 1px solid yellow;
    background-color:yellow;
}

As far as the position is concerned you can reapply css once the drop is complete.

function handle_drop_patient(event, ui) {
     $(this).append( $(ui.draggable).clone().css({'float':'left','display':'block'}) );
     $(ui.draggable).remove();
}

Answer 2

FYI: hoverClass has been deprecated in favour of classes option. It should now be:

$('.drop_div').droppable({
    classes: {
      'ui-droppable-hover': 'highlight'
    },
    drop: handle_drop_patient
});

Answer 3

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!" );
    }
});