Quando eu faço um clone draggable e soltá-lo em um I droppable não pode arrastá-lo novamente
-
22-08-2019 - |
Pergunta
Quando faço um clone draggable e soltá-lo em um droppable não posso arrastá-lo novamente. Como faço isso? Em segundo lugar eu só posso imaginar como nós .append
para adicionar o clone ao droppable. Mas então ela se encaixe para o canto superior esquerdo depois de qualquer elemento existente e não a posição de descida.
$(document).ready(function() {
$("#container").droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable).clone());
}
});
$(".product").draggable({
helper: 'clone'
});
});
</script>
<div id="container">
</div>
<div id="products">
<img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" />
<img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" />
<img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" />
</div>
Solução
Uma maneira de fazer isso é:
$(document).ready(function() {
$("#container").droppable({
accept: '.product',
drop: function(event, ui) {
$(this).append($("ui.draggable").clone());
$("#container .product").addClass("item");
$(".item").removeClass("ui-draggable product");
$(".item").draggable({
containment: 'parent',
grid: [150,150]
});
}
});
$(".product").draggable({
helper: 'clone'
});
});
Mas eu não tenho certeza se ele é bonito e limpo codificação.
Outras dicas
Eu encontrei esta questão através do Google. Eu não poderia manter as posições de encaixe para o recipiente, quer, até que eu mudei 'ui.draggable' para 'ui.helper' quando acrescentando:
$(this).append($(ui.helper).clone());
Para aqueles tentando reposicionar o item caiu. Dê uma olhada aqui.
Jquery arrastar / soltar e clone .
Na verdade, eu tive que usar o código que se parece com
$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
para fazê-lo.
Aqui está a minha solução, que permite arrastar e soltar um clone, e, em seguida, substituí-lo depois como necessária para outra drag and drop. Ele também tem um parâmetro de função de retorno de chamada que passa volta a cair div objeto de modo que você pode fazer algo com o jquery div selecionada, uma vez caiu.
refreshDragDrop = function(dragClassName,dropDivId, callback) {
$( "." + dragClassName ).draggable({
connectToSortable: "#" + dropDivId,
helper: "clone",
revert: "invalid"
});
$("#" + dropDivId).droppable({
accept: '.' + dragClassName,
drop: function (event, ui) {
var $this = $(this),
maxItemsCount = 1;
if ($this.children('div').length == maxItemsCount ){
//too many item,just replace
$(this).html($(ui.draggable).clone());
//ui.sender.draggable('cancel');
} else {
$(this).append($(ui.draggable).clone());
}
if (typeof callback == "function") callback($this.children('div'));
}
});
}