Question

我使用简单的Jquery可排序用户可以拖放元素，但是在每个元素上我都有一些数字，在加载屏幕上所有数字都是有序的，但是我需要whabe某人重新编码元素来自动根据这个数字他的选择。这是我的工作小提琴

当有人移动时我需要等等。第10号是第一个将该数字设为1而所有其他人重新编制索引？

以下是现在的代码

<ol class="example">
    <li> <span>1</span>
        <ol></ol>
    </li>
    <li> <span>2</span>
        <ol></ol>
    </li>
    <li> <span>3</span>
        <ol>
            <li><span>4</span>
            </li>
            <li><span>5</span>
            </li>
            <li> <span>6</span>
                <ol>
                    <li><span>7</span>
                    </li>
                </ol>
                <ol>
                    <li><span>8</span>
                    </li>
                    <li><span>9</span>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li><span>10</span>
    </li>
</ol>

JS

$(function  () {
  $("ol.example").sortable()
})

更新

现在我有像这样的结构1,2,3,4,5等。

当有人将4号移到第一个位置以将该数字移动到1以及所有其他数字重新排序时，我需要什么，就像我移动数字4首先将它的数字设置为1，并且首先是在新的1以下的数量为chnage数字为2，进一步

Answer 1

该插件包含onDrop个事件，因此您可以通过以下方式更新代码：

$(function () {
    $(".example").sortable({
        onDrop: function ($item, container, _super, event) {
            $('.example li').removeClass('dragged');
            $('.example li').removeAttr('style');
            $("body").removeClass('dragging');
            $('.example span').each(function (i) {
                var humanNum = i + 1;
                $(this).html(humanNum + '');
            });
        }
    });
});

看看Fiddle！

Answer 2

您可以使用update事件。

$(".example").sortable({
    update: function (event, ui) {
    $('.example span').each(function (i) {
            var numbering = i + 1;
            $(this).text(numbering);
        });
    }
});

Answer 3

仅CSS解决方案。

/* list container */
.example {
  counter-reset: seq;
}

/* list item to add number */
.example li>span:before {
  counter-increment: seq;
  content: "("counter(seq)") ";
}

提琴：http://jsfiddle.net/b9ythac6/
浏览器支持：https://caniuse.com/#feat=css-counters

Jquery可以改变元素的数量？

3 个答案: