2011-02-25 84 views
0

我正在jQuery上構建頁面佈局配置系統。所以每個使用我的網站的人都可以通過在網頁上移動元素來使其變得個人化。但是,我有一個問題。jQuery可拖動刪除而不更改其他元素的位置

我的網頁上的每個元素都是可拖動的div,必要時可以從頁面中刪除選項。當用戶想刪除一個元素,他點擊內股利和下面的函數調用:

<script language="javascript"> 
    $(function() { 
     $('.close').click(function(){ 
        $(this).parent().hide(); 
       }); 
    }); 
</script> 
    <div class="main"><div class="close"></div></div> 

當用戶想頁面上添加一個元素,他點擊鏈接,followinf函數被調用:

function addNewWidget(page_name, size){ 
    var page = $('#'+page_name); 
    var closeDiv = $(document.createElement("div")).attr("class", "close").html('X'); 
    closeDiv.click(function(){ 
     $(this).parent().hide(); 
    }); 
    var div = $(document.createElement("div")) 
    div.attr("class", "drag"); 
    div.appendTo(page); 
    closeDiv.appendTo(div); 
    div.draggable({ 
     containment: "#page", 
     scroll: false, 
     grid: [200, 200] 
    }); 
    div.css("top:0; left:0"); 
    div.addClass(size); 
    div.addClass('widget'); 
} 

一切工作正常,但當元素被刪除時,頁面上的其他元素正在向上移動。這是因爲代碼中的元素定位。代碼中的這些div在div之前被刪除,並且它們的絕對頂部由-heghtOfRemovedElement更改

是否有任何方法可以防止其他元素向上移動?

回答

1

我遇到你的問題,當我正在尋找一個完全不同的解決方案,但有同樣的問題:當從它的容器中移除一個元素時,其他元素將洗牌。

我不知道我最終制定出的解決方案是否會對您有所幫助,但如果確實如此......只是要確保將您的元素設置爲position:absolute。我也在使用拖放功能。事實證明,當你進入「可丟棄」區域時,position:absolute屬性不會被隱式設置,所以你必須手動完成。

相關問題