draggable에 대한 포함 옵션

Question

draggable에 대한 containment 옵션을 'document'로 지정했지만 드래그 가능한 요소를 컨테이너 외부로 드래그 할 수 없습니다. 이것은 매우 높은 Z- 색인을 지정하는 경우에만 가능합니다. 이상한 디스플레이 (다른 페이지 요소 위에 드래그 가능)가 생깁니다. editdiv 컨테이너에서 드래그 할 수있는 div를 editdiv2 컨테이너로 드래그 할 수 있도록 지정하려면 어떻게해야합니까?

$(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? 나는 http://jsfiddle.net/gkvgn/8/에 jsfiddle을 가지고있다. 감사.

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;을 제거했다.