드래그 가능한 복제본을 만들어서 드롭 가능에 놓으면 다시 드래그 할 수 없습니다.

드래그 가능한 복제본을 만들어서 드롭 가능에 놓으면 다시 드래그 할 수 없습니다.

---

드래그 가능한 복제본을 만들어서 드롭 가능에 놓으면 다시 드래그 할 수 없습니다. 어떻게하나요? 두 번째 .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>

---

이를 수행하는 한 가지 방법은 다음과 같습니다.

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

그러나 그것이 멋지고 깨끗한 코딩인지 확실하지 않습니다.

---

Google을 통해이 질문을 찾았습니다. 추가 할 때 'ui.draggable'을 'ui.helper'로 변경할 때까지 위치가 컨테이너에 스냅되지 않도록 할 수 없습니다.

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

---

떨어 뜨린 항목의 위치를 ​​변경하려는 경우. 여기를보세요.

jquery 드래그 / 드롭 및 복제 .

실제로 다음과 같은 코드를 사용해야했습니다.

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

그것을하기 위하여.

---

Here is my solution, it allows for dragging and dropping a clone, and then replacing it after as needed by another drag and drop. It also has a callback function parameter which passes back the dropped div object so that you can do something with the jquery selected div once dropped.

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

ReferenceURL : https://stackoverflow.com/questions/867469/when-i-make-a-draggable-clone-and-drop-it-in-a-droppable-i-cannot-drag-it-again