jQuery可拖动删除而不改变其他元素的位置答案

【问题标题】：jQuery draggable removing without changing position of other elementsjQuery可拖动删除而不改变其他元素的位置
【发布时间】：2011-02-25 07:19:17
【问题描述】：

我正在 jQuery 上构建一个页面布局配置系统。因此，使用我网站的每个人都可以通过在网页上移动元素来使其个性化。但是，我有一个问题。

我页面上的每个元素都是一个可拖动的 div，如有必要，可以选择从页面中删除。当用户想要删除一个元素时，他点击内部 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之前，被移除了，它们的绝对top被-heghtOfRemovedElement改变了

有什么办法可以防止其他元素上移吗？

【问题讨论】：

标签： jquery draggable

【解决方案1】：

我在为完全不同但存在相同问题的事物寻找解决方案时遇到了您的问题：从容器中删除一个元素后，其他元素会随机播放。

我不确定我最终制定的解决方案是否会对您有所帮助，但如果确实如此……只是为了确保您的元素设置为 position: absolute。我也在使用拖放功能。事实证明，当您进入“可放置”区域时，不会隐式设置 position:absolute 属性，因此您必须手动进行。

【讨论】：