Когда я делаю перетаскиваемый клон и бросаю его в droppable, я не могу его перетащить

Question

Когда я делаю перетаскиваемый клон и бросаю его в droppable, я не могу его перетащить снова. Как мне это сделать? Во-вторых, я могу только выяснить, как нам .append добавить клон в droppable. Но затем он привязывается к верхнему левому углу после любого существующего элемента, а не положению падения.

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

Один из способов сделать это:

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

Но я не уверен, что это хорошее и чистое кодирование.

Answer 2

Я нашел этот вопрос через Google. Я не мог удержать позиции от привязки к контейнеру либо, пока я не изменил «ui.draggable» до «ui.helper» при добавлении:

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

Answer 3

Для тех, кто пытается изменить сброшенный элемент. Взгляните сюда.

Jquery drag /drop and clone.

Я на самом деле должен был использовать код, который выглядит

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

, чтобы сделать это.

Answer 4

Вот мое решение, оно позволяет перетаскивать и клонировать клон, а затем заменять его по необходимости другим перетаскиванием. Он также имеет параметр функции обратного вызова, который передает обратно удаленный объект div, чтобы вы могли что-то сделать с выбранным jquery div после его удаления.

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