Question

我认为我几乎可以使用我的可排序实现，但我仍然会遇到一些小问题，也许这里有人可以提供帮助。

为了简要介绍一下我在容器div中有一组div，如下所示：

<div id="sample-list">
    <div class="sample">one</div>
    <div class="sample">two</div>
    <div class="sample">three</div>
    <div class="sample">four</div>
    <div class="sample">five</div>
    <div class="sample">six</div>
</div>

使用以下css（或多或少）：

#sample-list {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;

    width: 320px;
    height: 300px;
    float: left;
    background: #ccc;
    margin: 30px;
}

.sample {
    width: 80px;
    height: 30px;
    float: left;
    margin-bottom: 30px;
    margin-right: 40px;
    background: #fff;
    text-align:center;

    &:nth-child(3n + 3) {
        margin-right: 0;
    }
}

问题在于每个第3个元素都有0个边距，所以我不得不重置排序，更改和停止可排序事件的css。我将我的解决方案添加为答案......

我的问题如下：

在sortable中重置边距的最佳方法是什么，尤其是在右侧（或左侧）列中具有0边距的网格上？
首次开始排序时，避免元素跳跃的可靠方法是什么？

非常有兴趣听听您的想法。如果没有别的，我希望我能让你更容易地进行可排序的可靠工作。

Answer 1

我意识到这不是很优雅，但这是我能绕过它的唯一方法。

问题1：我注意到，当您单击并按住元素并将元素本身设置为position: absolute时，占位符将作为元素添加到列表中，从而将其从DOM中分离出来。这会将3n + 3计数重置为1，以便其余元素跳转调整。

我的解决方案是使用以下方法重置所有包含元素的边距：

$("#sample-list").sortable({
    // Stop the page from scrolling:
    scroll: false,

    'start': function(event, ui) {
        var resetGroup = (ui.helper.index() - (ui.helper.index() % 3)) / 3;
        var placeholderIndex = ui.helper.index() % 3;
        var noMargin = resetGroup * 3 + 4;

        if (placeholderIndex === 0 || placeholderIndex == 1) {
            $(".ui-sortable-placeholder").css('margin-right', '40px')
        }
        if (placeholderIndex == 2) {
            $(".ui-sortable-placeholder").css('margin-right', '0px');
        }

        $("#sample-list .sample:nth-child(3n+" + noMargin + ")").css("margin-right", "0px");

    },

然后在更改时，占位符的位置会跳转到您要悬停的新元素，因此我们需要重新设置边距。

'change': function(event, ui) {

    $("#sample-list .sample:nth-child(n)").css("margin-right", "40px");

    $(ui.helper[0].parentElement).children().not(".ui-sortable-helper").each(function(index) {
        if (index % 3 == 2) {
            $(this).css("margin-right", "0px");
        }
    });

},

最后，一旦排序完成（你放开鼠标并将元素放到适当位置），你需要再次运行边距重置。

'stop': function(event, ui) {

    $("#sample-list > div:nth-child(n)").css("margin-right", "40px");
    $("#sample-list > div:nth-child(3n+3)").css("margin-right", "0px");

},

这对我有用，但我确信必须有更好的选择。

问题2：现在我使用此处的解决方案停止初始跳转：https://stackoverflow.com/a/11874958/3656694

但是在初始加载时，元素仍会跳出视图。我必须放手再次抓住它才能移动并实际看到我将它移动到哪里。

我在这里有一个模仿的设置。我希望这能帮助别人，因为我花了一段时间才能聚在一起！ https://jsfiddle.net/restlessweb/wh4w2jaf/

修改对于问题2，我实际上最终选择了：https://stackoverflow.com/a/24122186/3656694 - 您将可排序列表设置为overflow: auto - 为此，虽然我必须拥有比我运行的jQuery更新版本的jQuery。我在1.11但更新到2.2.0，一切都开始变得更好了。

我已经更新了小提琴以反映上述情况。

jQuery在列布局上可排序，边距为0

1 个答案: