jQuery可拖动删除，而无需更改其他元素的位置 [英] jQuery draggable removing without changing position of other elements

问题描述

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

I am building a page layout configuration system on jQuery. So everyone, who is using my website can make it personal by moving elements on webpage. But, I have a problem.

我页面上的每个元素都是可拖动的div，并具有从页面中删除(如有必要)的选项.当用户想要删除一个元素时，他单击内部div并调用以下函数:

Every element on my page is a draggable div with option to be removed from page if necessary. When user wants to remove an element, he clicks on inner div and the following function is called:

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

当用户想要在页面上添加元素时，他单击链接，然后调用followinf函数:

When user wants to add an element on page, he clicks on link and followinf function is called:

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

Everything works fine, but when element is removed, other elements, which were on page are moving up. It is because of element positioning in the code. These divs in the code are before div, which was removed, and their absolute top is changed by -heghtOfRemovedElement

有什么方法可以防止其他元素向上移动吗?

Is there any way to prevent other elements from moving up?

推荐答案

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

I came across your question when I was looking for a solution for something completely different and yet with the same problem: Upon removing an element from it's container the other elements would shuffle around.

我不确定我最终想出的解决方案是否会为您提供帮助，但是如果确实如此，那只是为了确保将您的元素设置为位置:绝对.我也使用了拖放功能.事实证明，当您放入可放置"区域时，position:absolute属性不是隐式设置的，因此您必须手动进行设置.

I'm not sure if the solution I eventually worked out will help you, but in case it does ... it was simply to make sure that your elements are set as position: absolute. I was using drag/drop functionality as well. Turns out that when you drop into a "droppable" zone the position:absolute attribute isn't implicitly set, so you have to do it manually.

这篇关于jQuery可拖动删除，而无需更改其他元素的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！