jQuery ui draggable to menorpable
-
23-09-2019 - |
Pergunta
Estou usando isso http://jqueryui.com/demos/droppable/
Mas tenho um problema de arrastar para um droppable menor que o arrastável.
Não cairá no droppable, mas no canto superior esquerdo do droppable.
(fonte: yart.com.au)
Existe alguma maneira de contornar isso?
Aqui está o código, obrigado.
$('.draggable').draggable({
revert: 'invalid',
revertDuration: 500,
appendTo: 'body',
helper: function(event, ui) {
return $(this).clone().appendTo('body').css('zIndex', 5).show();
},
drag: function(event, ui) {
$(ui.helper).removeClass("enlarge");
$(ui.helper).addClass("thumbnail");
$(this).hide();
},
stop: function(event, ui) {
$(this).show();
//$(this).addClass("enlarge");
if ($(this).parent().hasClass("imageContainer")) {
$(this).addClass("thumbnail");
}
else {
$(this).addClass("enlarge");
}
},
//cursorAt: { top: 30, left: 40 },
delay: 100,
refreshPositions: true
});
$('.imageContainer').droppable({
accept: '.draggable',
drop: function(event, ui) {
ui.draggable.css({
"position": "relative",
"left": "0px",
"top": "0px"
});
if ($(this).children().length == 0) {
// ui.draggable.addClass("thumbnail");
$(ui.draggable).appendTo(this);
$(this).removeClass("border");
}
},
over: function(event, ui) {
ui.draggable.removeClass("enlarge");
ui.draggable.addClass("thumbnail");
$(this).addClass("border");
},
out: function(event, ui) {
// ui.draggable.removeClass("zoomIn")
$(this).removeClass("border");
},
tolerance: 'intersect'
});
CSS:
.thumbnail {
height:60px;
margin-right:10px;
width:80px;
z-index:1;
}
.enlarge {
border:5px solid white;
height:145px;
width:195px;
}
Solução
$('.draggable').draggable({
revert: 'invalid',
revertDuration: 500,
appendTo: 'body',
helper: function(event, ui) {
return $(this).clone().appendTo('body').css('zIndex', 5).show();
},
drag: function(event, ui) {
/* $(ui.helper).removeClass("enlarge");
$(ui.helper).addClass("thumbnail"); */
$(this).hide();
},
stop: function(event, ui) {
$(this).show();
//$(this).addClass("enlarge");
if ($(this).parent().hasClass("imageContainer")) {
$(this).addClass("thumbnail");
}
else {
$(this).addClass("enlarge");
}
},
//cursorAt: { top: 30, left: 40 },
delay: 100,
refreshPositions: true
});
Tente substituir seu código por este bloco acima e veja se ele chega perto do que você deseja. Pode ainda não estar perfeito, mas vamos ver se podemos enfrentar uma mudança de cada vez. O que espero observar é que ele cai aproximadamente como deveria.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow