Comment puis-je mettre en évidence une zone droppable en vol stationnaire en utilisant jQuery ui draggable
j'ai en fait deux questions, l'on dans le titre étant le principal. J'ai plusieurs éléments div sur la page marquée comme droppable. À l'intérieur de ces éléments div, j'ai des portées marquées comme étant draggables. Je le veux ainsi, lorsque vous faites glisser un élément et il est a plané sur une drop zone de zone de relief ou a une frontière alors qu'ils savent qu'ils peuvent déposer.
comme question secondaire, tous mes éléments draggables ont un affichage: bloc, une largeur et un flotteur sur eux, elles sont belles et soignées dans mes zones droppables. Lorsque les articles sont déposés, ils semblent obtenir une position fixée à eux car ils ne flottent plus agréable et soigné comme le reste de mes articles. Pour référence, voici mon code 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();
}
3 réponses
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!" );
}
});
cela devrait fonctionner pour ajouter un highlight en vol stationnaire.
$('.drop_div').droppable({
hoverClass: "highlight",
drop: handle_drop_patient,
});
puis créer une classe css pour mettez en surbrillance qui définit la bordure ou modifie la couleur de fond ou ce que vous voulez.
.highlight {
border: 1px solid yellow;
background-color:yellow;
}
en ce qui concerne le poste, vous pouvez présenter une nouvelle demande de css une fois le dépôt terminé.
function handle_drop_patient(event, ui) {
$(this).append( $(ui.draggable).clone().css({'float':'left','display':'block'}) );
$(ui.draggable).remove();
}
pour information:hoverClass a été déprécié en faveur de classes option. Désormais, il devrait être:
$('.drop_div').droppable({
classes: {
'ui-droppable-hover': 'highlight'
},
drop: handle_drop_patient
});