Quando faccio un clone trascinabile e lo faccio cadere in un oggetto trascinabile non riesco a trascinarlo di nuovo

Question

Quando faccio un clone trascinabile e lo faccio cadere in un oggetto trascinabile non riesco a trascinarlo di nuovo. Come lo faccio? In secondo luogo posso solo capire come noi .append aggiungere il clone al droppable. Ma poi si aggancia all'angolo superiore sinistro dopo ogni elemento esistente e non alla posizione di rilascio.

$(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 io non sono sicuro se è bello e pulito di 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. Dai un'occhiata qui.

Jquery drag /drop and clone.

ho dovuto utilizzare codice simile

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

Ecco la mia soluzione, che consente di trascinare e rilasciare un clone e quindi sostituirlo, se necessario, con un altro trascinamento. Dispone anche di un parametro della funzione callback che restituisce l'oggetto div rilasciato in modo da poter fare qualcosa con il div jquery selezionato una volta rilasciato.

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