드래그에서 클론 노드

Question

드래그하고 싶은 요소의 사본을 만들 수 있기를 원합니다. 표준 UI 드래그 가능하고 드롭 가능합니다. 나는 도우미 클론 옵션에 대해 알고 있습니다. 그러나 그것은 사본을 만들지 않습니다. 드래그 된 항목은 원래 위치로 되돌아갑니다.

Answer 1

표시,

이 예제를 시도하십시오 :

        $(document).ready(function(){
        $(".objectDrag").draggable({helper:'clone'});  

        $("#garbageCollector").droppable({
            accept: ".objectDrag",
            drop: function(event,ui){
                    console.log("Item was Dropped");
                    $(this).append($(ui.draggable).clone());
                }
        });

    });

그리고 HTML은 다음과 같습니다

        <div class="objectDrag" 
        style="width:10%; color:white;border:black 1px solid; background-color:#00A">Drag me</div>

    <div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div>

Answer 2

나는 댓글을 달 수 없기 때문에 (아직) 이것을 별도의 대답으로 남겨 두겠습니다. 나와 같은 누군가 가이 질문을 찾을 경우.

의견의 질문에

"그러나 나는 복제 된/드롭 요소가 그것이 떨어진 것과 같은 위치에 있기를 원한다. 내가 어떻게 할 수 있는지 아십니까?"

다른 SO 질문에서 해결책을 찾았고 답은이 라인을 변경하는 것입니다.

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

에게

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

(UI.Draggable 변경 UI.Helper 변경)

도움이되기를 바랍니다.

Answer 3

클론/복사를 다시 드러내려면 withDataAndEvents 논쟁 진실:

$(this).append($(ui.draggable).clone(*true*));