¿Cómo puedo resaltar un área desplegable al desplazar el mouse utilizando jquery ui draggable?

De hecho, tengo dos preguntas, la del título es la principal. Tengo varios elementos div en la página marcados como droppable. Dentro de estos elementos div tengo vanos que están marcados como arrastrables. Lo quiero para que cuando arrastre un elemento y se desplace sobre un área desplegable, el área resalte o tenga un borde para que sepan que pueden soltarlo allí.

Como pregunta secundaria, todos mis elementos arrastrables tienen una pantalla: un bloque, un ancho y un flotador en ellos, por lo que se ven bien y ordenados en las áreas donde se pueden colocar. Cuando los artículos se caen, parecen tener una posición establecida ya que ya no flotan bien como el rest de mis artículos. Para referencia, aquí está mi 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(); } 

Echa un vistazo a 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!" ); } }); 

Esto debería funcionar para agregar un resaltado en el hover.

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

Luego crea una clase css para resaltar que establezca el borde o cambie el color de fondo o lo que quieras.

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

En lo que respecta a la posición, puede volver a aplicar css una vez que se complete la caída.

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

FYI: hoverClass ha sido desaprobado en favor de la opción de classes . Ahora debería ser:

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