可拖動元素的遏制

如何定義拖動的遏制區域以使其可拖拽到其父元素之外？我有兩個可拖放的容器，其中有可拖動的div。我想拖拽容器之間的包含div。但divs放在父容器的邊界下，而不是經過。如果我設置了非常高的z索引，我只能讓div從一個容器到另一個容器，這導致div不能真正放在容器中。這會弄亂頁面顯示。可拖動元素的遏制

這是這個http://jsfiddle.net/gkvgn/8/ jsfiddle。該jsfiddle中的相關代碼是這樣的函數，其中容器div可拖動和放置，並且包含的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-index是個問題，所以我在css中設置了ui-draggable-dragging類的z-index。

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

我必須修復哪些問題才能拖動元素div，例如： Facebook.com從第一個容器到第二個？謝謝。

來源

2011-10-06 user823527

不得不移除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/。

來源

2011-10-20 01:07:11 user823527

可拖動元素的遏制

回答

相關問題