如何像文字处理程序一样拖放div-没有间隙或重叠

编程问答 2022-08-16

问题描述

我正在尝试重新创建每个文字处理器中提供的基本功能，该功能使您可以将一个div（Div1）拖到另一个div（Div3）上，并让Div1在Div3之后插入自己而不重叠。相反，Div1恰好在我放下的地方着陆，与Div3重叠，并且在页面的可见流中留有空隙。但是，Chrome调试器的DOM视图显示它已正确插入，并且CSS检查器没有任何指示（我可以看到）将其放置在页面上，就好像它被定位为绝对位置一样。

因此，想象一个页面以四个编号的div开始，每个div整齐并自动间隔。然后想象一下将Div1拖到Div3上，希望除了顺序为Div2，Div3，Div1，Div4之外，其他看起来一样。但相反，它看起来像这样：

I

我正在使用jquery和jquery.ui。

这是HTML：

    <body>
        <div id="bigcontainer-test">
            <div class="row-test level0" level="0" id="1">1</div>
            <div class="row-test level0" level="0" id="2">2</div>
            <div class="row-test level0" level="0" id="3">3</div>
            <div class="row-test level0" level="0" id="4">4</div>
        </div>
    </body>

页面加载后会调用JavaScript：

function makeDraggable(row) {
    console.log("Made draggable");
    $(row).draggable({
        revert: false,axis: "y",// only vertical
        containment: 'document'
    });
}

function makeDroppable(row) {
    console.log("Made droppable");
    $(row).droppable({
        drop: function (event,ui) {
            $(ui.draggable).insertAfter(row);
        }
    });
}

这是CSS（没有我随机尝试过的200万个变体）：

.row-test{
    overflow: visible;
    display: block;
    margin: auto;
    background-color: yellow;
    border: 3px solid white;
    position: relative;
}

#bigcontainer-test{
    margin: auto;
    display: block;
}

关于我在做什么错的任何想法吗？谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

drag-and-drophtmljqueryjquery-ui-draggable