tooltip jquery ejemplos

¿Cómo puedo resaltar un área que se puede desplegar al pasar el mouse usando jquery ui que se puede arrastrar?

Question

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 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, para que se vean bonitos y aseados en mis áreas que se pueden soltar. 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

Consulte 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 agregar un destacado en el vuelo estacionario.

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

Luego crea una clase css para destacar que establece el borde o cambia 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();
}

Answer 3

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

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