한 div 내에서 다른 div 내로 요소 드래그

한 div의 요소를 다른 div로 드래그 할 수있는 기능이 필요합니다.한 div 내에서 다른 div 내로 요소 드래그

jQuery UI draggable 및 droppable하지만 DOM을 통해 이동하지 않고 position:relative을 사용하여 요소를 시각적으로 조작하는 것처럼 보입니다. 가능한 경우 예제를 찾거나 방법을 파악할 수 없습니다.

<div id="firstDiv"> 
    <div id="moveMe">I need to be moved to secondDiv</div> 
</div> 
<div id="secondDiv"> 
</div>

방법 #moveMe 끌어 #secondDiv에 #firstDiv에서 제외 될 수있다 : I는 다음과 같은 두 가지 간단한 div의가있는 경우

말?

출처

2014-04-02 Anonymous

DOM을 조작하지 않는 이유는 내가 생각하기에 그들이 그렇게하도록 설계 되었기 때문입니다. 그런 다음 DOM을 조작하려면

당신은 다음과 같은 트릭

그런 다음 helper option, 요소가 삭제됩니다, 당신의 원본을 복제하는 좌표를 읽은 다음 jQuery Clone 기능을 사용하여 사용할 수 있습니다 div#moveMe 드롭 영역 #secondDiv다음에 일본어 소자 #firstDiv > div#moveMe

출처

2014-04-02 02:18:47 Nis

하는 기능은 매우 간단하다 제거하지만, 예측할 수없는 결과를 가질 수있다. 당신이 position: relative으로 설정된 것을 언급했듯이, 문제는 그것들이 존재하기 때문에, 객체는 새로운 부모에 상대적으로 될 것이기 때문에 떨어 뜨린 곳에서 위치를 바꿀 것입니다. 이 문제를 해결하려면 개체를 놓을 때마다 위치를 다시 계산해야합니다.

이것은 이전 부모 위치와 새 부모 위치 및 새 오프셋을 찾는 것만으로도 상당히 간단하게 수행 할 수 있습니다. http://codepen.io/anon/pen/KfDyj/ :

이 모든 기능

그렇게

$(document).ready(function() { 
    $("#draggable").draggable(); 
    $(".droppable").droppable({ 
     drop: function(event, ui) { 
     //Get the position before changing the DOM 
     var p1 = ui.draggable.parent().offset(); 
     //Move to the new parent 
     $(this).append(ui.draggable); 
     //Get the postion after changing the DOM 
     var p2 = ui.draggable.parent().offset(); 
     //Set the position relative to the change 
     ui.draggable.css({ 
      top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top), 
      left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left) 
     }); 
     } 
    }); 
});

체크 아웃 작업, 예를 들어이 CodePen 같이 수행 할 수 있습니다.

출처

2014-04-02 02:48:34

한 div 내에서 다른 div 내로 요소 드래그

답변

관련 문제