jQuery: Como parar um ajudante de ser removido se não foi removida com sucesso
-
03-07-2019 - |
Pergunta
Eu tenho um draggable
com um costume helper
. Às vezes, o ajudante é um clone e às vezes é o elemento original.
O problema é que quando o ajudante é o elemento original e é não caiu em um droppable válida for removido. Minha solução olhares como este até agora:
Na minha on_dropped
callback I set ui.helper.dropped_on_droppable
para true
;
No retorno stop
do draggable, eu verifico para essa variável e então ... o que eu faço?
$('.my_draggable').draggable({
stop : function(e, ui) {
if (!ui.helper.dropped_on_droppable) {
/* what do I do here? */
}
},
É este mesmo o caminho certo?
Solução
Ok, eu encontrei uma solução! É feio e quebra das regras de encapsulamento ", mas pelo menos ele faz o trabalho.
Lembre-se este é apenas para casos especiais ! jQuery pode lidar com sua própria remoção ajudante muito bem. No meu caso eu tinha um ajudante que às vezes era o elemento original e, por vezes, um clone, por isso não foi sempre conveniente suprimir a helper depois de reverter.
element.draggable({
stop : function(e, ui) {
/* "dropped_on_droppable" is custom and set in my custom drop method
".moved_draggable" is custom and set in my custom drag method,
to differentiate between the two types of draggables
*/
if (!ui.helper.dropped_on_droppable & ui.helper.hasClass('moved_draggable')) {
/* this is the big hack that breaks encapsulation */
$.ui.ddmanager.current.cancelHelperRemoval = true;
}
},
AVISO: Este encapsulamento breaks e pode não ser para a frente compatível
Outras dicas
Eu poderia estar faltando alguma coisa aqui, mas não é simplesmente um caso de adição
revert: "invalid"
para as opções do draggable se o draggable é de um elemento original, não um clone?
Eu uso um auxiliar personalizado que draggables agregados de múltipla seleção em uma única div. Este não parece jive com a funcionalidade revert então eu vim com este esquema. Os elementos são acrescentados manualmente de volta para o progenitor original que I acompanhar de via .data ().
.draggable({
helper: function() {
var div = $(document.createElement('div'))
.data('lastParent', $(this).parent());
return div;
},
start: function() {
//... add multiple selection items to the helper..
},
stop: function(event,ui) {
$( $(ui.helper).data('lastParent') ).append( $(ui.helper).children() );
}
}
Esta abordagem não perder na animação bonita, mas pode ser útil para você ou alguém com esta questão.