Quando faccio un clone trascinabile e rilasciarlo in un droppable non riesco a trascinarlo di nuovo

Question

Quando faccio un clone trascinabile e rilasciarlo in un droppable non riesco a trascinarlo di nuovo. Come lo faccio? In secondo luogo io riesco a capire solo come noi .append per aggiungere il clone al droppable. Ma poi non scatta verso l'angolo in alto a sinistra dopo un elemento esistente e non la posizione goccia.

$(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>

Answer 1

Un modo per farlo è:

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

Ma non sono sicuro se è bello e pulito codifica.

Answer 2

Ho trovato questa domanda tramite Google. Non riuscivo a tenere le posizioni da rompersi al contenitore sia, fino a quando ho cambiato 'ui.draggable' a 'ui.helper' quando aggiungendo:

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

Answer 3

Per coloro che cercano di riposizionare l'oggetto caduto. Date un'occhiata qui.

Jquery drag / drop e clone .

In realtà ho dovuto usare il codice che appare come

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

per farlo.

Answer 4

Questa è la mia soluzione, permette di trascinare e rilasciare un clone, e quindi la sua sostituzione dopo, se necessario da un altro drag and drop. Essa ha anche un parametro di funzione di callback che passa indietro l'oggetto div sceso così che si può fare qualcosa con il jquery selezionato div una volta caduto.

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