¿Cómo puedo resaltar un área desplegable al pasar el mouse usando jquery ui draggable

Question

Tengo dos preguntas, el título es el principal. Tengo varios elementos div en la página marcados como droppable. Dentro de estos elementos div tengo espacios que están marcados como arrastrables. Lo quiero así, cuando estás arrastrando un elemento y está sobre un área desplegable, ese área resalta o tiene un borde para que sepan que pueden soltarlo allí.

Como una pregunta secundaria, todos mis elementos arrastrables tienen una pantalla: bloque, un ancho y un flotador en ellos, por lo que se ven bonitos y aseados en mis áreas que se pueden quitar. Cuando se eliminan los elementos, parecen tener una posición establecida para ellos, ya que no flotan bien y pulcra como el resto de mis artículos. Como 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(); 
} 

Answer 1

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

Answer 2

Esto debería funcionar para añadir un toque de luz en vuelo estacionario.

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

A continuación, cree una clase CSS para culminante que marca la frontera o cambia el color de fondo o lo que usted desea.

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

En cuanto 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(); 
} 

Answer 3

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

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