web-dev-qa-db-fra.com

Comment mettre en surbrillance une zone largable en survol à l'aide de jquery ui draggable

J'ai en fait deux questions, celle du titre étant la principale. J'ai plusieurs éléments div sur la page marqués comme largables. À l'intérieur de ces éléments div, j'ai des étendues marquées comme pouvant être déplacées. Je le veux donc lorsque vous faites glisser un élément et qu'il survole une zone largable qui est en surbrillance ou a une bordure afin qu'ils sachent qu'ils peuvent le déposer là.

Comme question secondaire, tous mes éléments déplaçables ont un affichage: un bloc, une largeur et un flotteur sur eux, donc ils ont l'air sympa et soigné dans mes zones largables. Lorsque les objets sont déposés, ils semblent avoir une position définie car ils ne flottent plus Nice et bien rangés comme le reste de mes objets. Pour référence, voici mon 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();
}
jqueryjquery-uidrag-and-dropjquery-ui-draggablejquery-ui-droppable
30
Jhorra

Découvrez 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!" );
    }
});
44
j08691

Cela devrait fonctionner pour ajouter une surbrillance au survol.

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

Ensuite, créez une classe css pour surbrillance qui définit la bordure ou modifie la couleur d'arrière-plan ou ce que vous souhaitez.

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

En ce qui concerne la position, vous pouvez réappliquer css une fois la suppression terminée.

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

Pour info: hoverClass a été déconseillé au profit de l'option classes . Ce devrait maintenant être:

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