Je fais une application, qui utilise une goutte dressable Une solution de contournement est arrivée dans Mi Mind. Comment puis-je vérifier est qu'il y a un élément abandonné dans ce dressable div? Si c'est occupé, revenez cette dragge, qui tente d'être abandonnée div et quelques discranges div s. Comment puis-je rendre la liste conductable pour ne pas accepter plus d'une draggetable div ? J'ai googlé, mais je n'ai trouvé aucune solution de contournement.
9 Réponses :
Vous pouvez détruire le .doppable () widget après la première goutte , comme ceci:
Ok, mais quand je libère ce champ goutte à goutte à gouttes, comment le rendre heureux à nouveau
@Emil - Vous pouvez utiliser "désactiver" puis "Activer" plus tard au lieu de "détruire" si vous devez le réactiver :)
Je l'ai fait, mais je ne sais pas comment l'activer. J'ai essayé avec Sortir: Activer_droppable, mais cela n'a pas fonctionné. Que dois-je utiliser au lieu de "sortir"
Pour l'activer, utilisez l'option: $ (sélecteur "). Dressable ({désactivé: ** false **});
OK a trouvé une belle solution pour cela, essentiellement sur 'DROP', je définissais la récupération pour accepter uniquement l'élément qui a été entraîné.
Lorsque vous «désactiverez», l'événement «OUT» que vous devez réinitialiser n'est plus disponible, alors je viens de changer les éléments éligibles. p>
Puis il m'est possible d'utiliser l'événement Out pour ré-accepter tous les éléments de dragage et, car rien d'autre n'est accepté, la sortie ne sera pas déclenchée par d'autres draggables: P>
$(".drop-zone").droppable({
drop: function(event, ui) {
$(this).droppable('option', 'accept', ui.draggable);
},
out: function(event, ui){
$(this).droppable('option', 'accept', '.drag-item');
}
});
});
J'ai eu le même problème aussi. Solution intelligente! Bon travail!
Malheureusement, cela rompt si l'élément glagible revenait à la zone. Drop-Zone - E.G. L'utilisateur dépose l'élément sur une zone non valide.
@Yayitswei u̶s̶i̶n̶g̶ ̶'̶o̶v̶e̶r̶: ̶̶̶n̶s̶the̶e̶a̶d̶ ̶o̶f̶ ̶'̶o̶u̶t̶'̶ ̶s̶h̶o̶̶x̶ ̶i̶t̶̶x̶ ̶̶t̶.̶ J'étais tort ..
Que diriez-vous:
$(".drop-zone").droppable({
accept: function(draggable) {
return $(this).find("*").length == 0;
});
});
Vous pouvez également le faire dans l'inverse, en revenant la dragagable lorsque le goutte dressable a une certaine classe ou un certain attribut (bâtiment sur cet exemple: https://stackoverflow.com/a/3418306/1005334 ).
Ainsi, par exemple, à l'aide de l'attribut et la dragge: rel '/ code> (vous pouvez également utiliser classe ou quelque chose d'autre), pour la goutte dressable:
Facile Peasey. Il suffit d'activer toutes les zones .Drop's lorsque vous avez surilli sur eux, puis vérifiez si la zone .Drop actuellement planifiée contient un élément de dragage
$('.drop-zone').droppable({
over: function(event, ui) {
// Enable all the .droppable elements
$('.droppable').droppable('enable');
// If the droppable element we're hovered over already contains a .draggable element,
// don't allow another one to be dropped on it
if($(this).has('.draggable').length) {
$(this).droppable('disable');
}
}
});
Je veux juste souligner que c'est l'une des rares réponses ici qui fonctionnent réellement.
$ (this) .has ('. Draggable'). La longueur retourne toujours 0 pour moi. Y a-t-il peut-être une nouvelle syntaxe?
Cette solution résout un bogue majeur dans la réponse de likwid_t.
$('.draggable').draggable({
start: function(ev, ui) {
$('.ui-droppable').each(function(i, el) {
if (!$(el).find('.ui-draggable').length) $(el).droppable('enable');
});
}
});
$('.droppable').droppable({
drop: function(ev, ui) {
$(ev['target']).droppable('disable');
}
});
Ma solution est similaire à celle de Likwid_T, sauf qu'il utilise l'événement droppable goutte code> ainsi que de maintenir les liens entre les dragghables et les récupérateurs au lieu de l'événement OUT CODE> DROPPABLE. Je pense que le problème de l'utilisation de out code> est qu'il est tiré même lorsque une dragage est déplacée sur une liste de récupération déjà "pleine", puis "Out" de celui-ci. droppable({
drop: function(event, ui) {
var $droppable = $(this);
var $draggable = ui.draggable;
// Reset position of any old draggable here
var oldDragged = $droppable.data('dragged');
if(oldDragged) {
// In the CSS I have transitions on top and left for .ui-draggable, so that it moves smoothly
oldDragged.css({top: 0, left: 0});
oldDragged.data('dropped', null);
}
// If the draggable is moved from another droppable, unlink it from the old droppable
var oldDropped = $draggable.data('dropped');
if(oldDropped) {
$draggable.data('dropped', null);
oldDropped.data('dragged', null);
}
// Link the draggable and droppable
$draggable.data('dropped', $droppable);
$droppable.data('dragged', $draggable);
},
});
Je passe de nombreuses heures à comprendre et finalement cela fonctionne pour moi comme ceci:
$( ".drop-zone" ).droppable({
classes: {
"ui-droppable-active": "ui-state-active",
"ui-droppable-hover": "ui-state-hover"
},
accept: function( draggable ){
if (!$(this).hasClass('dropped') || draggable.hasClass('dropped')){
return true;
}
return false;
},
drop: function( event, ui ) {
$(this).addClass('dropped');
ui.draggable.addClass('dropped');
},
out: function( event, ui ){
$(this).removeClass('dropped');
ui.draggable.removeClass('dropped');
}
});