Quando eu faço um clone arrastável e solto em um droppable eu não posso arrastá-lo novamente

Quando eu faço um clone arrastável e solto em um droppable eu não posso arrastá-lo novamente. Como faço isso? Em segundo lugar eu só posso descobrir como para nós .append para adicionar o clone para o droppable. Mas, então, ele se encheckbox no canto superior esquerdo após qualquer elemento existente e não na posição de queda.

 $(document).ready(function() { $("#container").droppable({ drop: function(event, ui) { $(this).append($(ui.draggable).clone()); } }); $(".product").draggable({ helper: 'clone' }); });  

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 não tenho certeza se é um código bom e limpo.

Eu encontrei esta pergunta via Google. Eu não consegui impedir que as posições se encaixem no contêiner, até que eu mudei ‘ui.draggable’ para ‘ui.helper’ ao acrescentar:

 $(this).append($(ui.helper).clone()); 

Para aqueles que tentam reposicionar o item descartado. Dê uma olhada aqui.

JQuery arrastar / soltar e clonar .

Eu realmente tive que usar o código que parece

 $(item).css('position', 'absolute'); $(item).css('top', ui.position.top - $(this).position().top); $(item).css('left', ui.position.left - $(this).position().left); 

para fazer isso.

Aqui está a minha solução, ele permite arrastar e soltar um clone e, em seguida, substituí-lo depois, conforme necessário, por outro arrastar e soltar. Ele também possui um parâmetro de function de retorno de chamada que retorna o object div descartado para que você possa fazer algo com a div selecionada pelo jquery, uma vez descartada.

 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')); } }); }