Alex Rivera | Logout

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

Asked 2012-03-26T20:36:27.907
35

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();
}
jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-droppable
Edit
Report

1 Answer

18

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();
}
answered 2012-03-26T21:00:14.570

Your Answer