드래그 가능 요소 포함하기

Question

드래그 가능 요소가 포함 된 드래그 가능 요소를 부모 요소 외부로 드래그 가능하게 정의하려면 어떻게해야합니까? 나는 draggable div가있는 두 개의 droppable 컨테이너를 가지고 있습니다. 컨테이너 사이에 포함 된 div를 드래그하려고합니다. 그러나 div는 부모 컨테이너의 경계 아래로 떨어지는 대신 떨어집니다. 나는 매우 높은 z 인덱스를 설정하면 한 컨테이너에서 다른 컨테이너로 div를 가져올 수 있습니다. 그러면 div가 실제로 컨테이너 내에 위치하지 않게됩니다. 이것은 페이지 표시를 엉망으로 만듭니다.

여기는이 http://jsfiddle.net/gkvgn/8/의 jsfiddle입니다. 그 jsfiddle에서 관련 코드는 container div가 draggable 및 droppable로 만들어지고 포함 된 div 요소가 'document'의 포함으로 드래그 가능하게되는 함수입니다.

$(function() { 
    $("#editdiv").resizable(); 
    $("#editdiv").draggable(); 
    $("#editdiv").draggable("option", "handle", '#heading'); 
    $("#editdiv2").resizable(); 
    $("#editdiv2").draggable(); 
    $("#editdiv2").draggable("option", "handle", '#heading'); 
    $(".comurl").draggable(); 
    $(".comurl").draggable("option", "handle", '#dhandle'); 
    $("div.droppable").droppable({ 
     drop: function(event, ui) { 
      var $item = ui.draggable; 
      $item.fadeOut(function() { 

      $item.css({"left":"", "top":"", "bottom":"", "right":"" }).fadeIn(); 
     }); 
    $item.appendTo(this); 
     } 
    }); 

    $(".comurl").draggable({ containment: 'document' }); 

}); 

내가 '부모'또는 '창'컨테이너에서 드래그 된 div에 대한 봉쇄를 변경하는 경우

내가 '문서'를 선택하면보다 더 많은 제약을받을 것으로 보인다.

나는 z- 인덱스가 문제라고 생각하여 CSS에서 ui-draggable-dragging 클래스의 z- 인덱스를 설정했습니다.

.ui-draggable-dragging { 
    z-index: 999999; 
    background-color: red; 
} 

요소 div를 드래그 할 수있게하려면 어떻게해야합니까? 첫 번째 컨테이너에서 두 번째 컨테이너로 Facebook.com? 감사.

Answer 1

는

.link_drop_box{ 
     height:80%; 
     /* overflow:hidden; */ 
} 
.comdiv { 
     position:absolute; 
     padding: 0; 
     border: 1px solid DarkKhaki; 
     border-radius: 3px 3px 0px 0px; 
     box-shadow: inset 0px 0px 10px DarkKhaki; 
     /* overflow-y: hidden; 
     overflow-x: hidden; */ 
    } 

http://jsfiddle.net/gkvgn/10/overflow: hidden;을 제거했다.