Khi tôi tạo một bản sao có thể kéo và thả nó trong một ống nhỏ giọt, tôi không thể kéo nó một lần nữa

Question

Khi tôi tạo một bản sao có thể kéo và thả nó trong một phân đoạn, tôi không thể kéo lại. Làm thế nào để làm điều đó? Thứ hai, tôi chỉ có thể tìm ra cách để chúng tôi .append thêm bản sao vào phân đoạn. Nhưng sau đó nó snaps để góc trên bên trái sau khi bất kỳ yếu tố hiện có và không phải là vị trí thả.

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

Một cách để làm điều đó là:

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

Nhưng tôi không chắc chắn nếu nó là tốt đẹp và sạch sẽ mã hóa.

Answer 2

Tôi đã tìm thấy câu hỏi này qua Google. Tôi không thể giữ các vị trí từ chụp vào thùng chứa, cho đến khi tôi thay đổi 'ui.draggable' thành 'ui.helper' khi thêm:

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

Answer 3

Đối với những người cố định vị trí mục đã bị loại bỏ. Hãy xem ở đây.

Jquery drag /drop and clone.

Tôi thực sự đã phải sử dụng mã trông giống như

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

để làm điều đó.

Answer 4

Đây là giải pháp của tôi, nó cho phép kéo và thả một bản sao, và sau đó thay thế nó sau khi cần thiết bằng cách kéo và thả khác. Nó cũng có một tham số hàm gọi lại mà trả về đối tượng div bị rớt để bạn có thể làm điều gì đó với div được chọn jquery một lần bị loại bỏ.

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