draggable 복제본을 만들고 droppable에 놓으면 다시 끌 수 없습니다.

Question

draggable 복제본을 만들고 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.helper'에서 'ui.draggable'변경 될 때까지 나는 어느 컨테이너에 스냅에서 위치를 내지 못했습니다 :

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