Сдерживание для перетаскиваемого элемента

Question

Как определить область содержания для перетаскиваемого объекта, чтобы его можно было перетаскивать за пределы родительского элемента?У меня есть два сбрасываемых контейнера, в которых есть перетаскиваемые элементы div.Я хочу перетащить содержащиеся элементы div между контейнерами.Но элементы div попадают под границу родительского контейнера, а не пересекаются.Я могу заставить div'ы переходить из одного контейнера в другой только в том случае, если я установил очень высокий z-индекс, из-за чего div-ы в действительности не помещаются в контейнер.Это портит отображение страницы.

Вот jsfiddle для этого http://jsfiddle.net/gkvgn/8/. Соответствующий код в этом jsfiddle - это та функция, где делители контейнера делаются перетаскиваемыми и сбрасываемыми, и где содержатся элементы div.сделанный перетаскиваемым с включением «документа».

$(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-index является проблемой, я установил z-index для класса ui-draggable-dragging в CSS.

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

Что я должен исправить, чтобы бытьВы можете перетащить элемент div, например, Facebook.com из первого контейнера во второй?Спасибо.

Answer 1

Пришлось удалить overflow: hidden;

.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/.