Question

我正在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之前被删除，并且它们的绝对顶部由-heghtOfRemovedElement改变

有没有办法阻止其他元素向上移动？

Answer 1

当我在寻找一个完全不同但又有同样问题的解决方案时，我遇到了你的问题：从容器中取出一个元素时，其他元素会随意乱转。

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

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

1 个答案: