Опция сдерживания для перетаскиваемого - PullRequest
Новая
       6

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

0 голосов
/ 07 октября 2011

Я указываю параметр включения для перетаскиваемого объекта как «документа», но перетаскиваемый элемент нельзя перетаскивать за пределы контейнера.Это возможно, только если я укажу очень высокий z-индекс.Это приводит к странному отображению (перетаскиваемые элементы над другими элементами страницы).Что я должен указать, чтобы перетаскиваемые элементы div из контейнера editdiv перетаскивались в контейнер 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' }); 

});

Если я изменяю содержимое на 'parent' или 'window', перетаскиваемые элементы div в контейнере кажутся более ограниченными, чем если бы я выбирал 'document'.

Так как я думалчто z-index был проблемой, я установил z-index для класса ui-draggable-dragging в CSS. 

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

Что я должен исправить, чтобы иметь возможность перетаскивать элемент div, например, Facebook.com из первого контейнера во второй?У меня есть jsfiddle на http://jsfiddle.net/gkvgn/8/. Спасибо.

1 Ответ

0 голосов
/ 20 октября 2011

Пришлось удалить 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/.

...