Jquery 可排序的水平列表不适用于固定项目

Question

我正在尝试构建一个 jQuery 水平可排序列表，每个可排序项之间有一个箭头 div。

我看过一些示例，在可排序更改函数中我可以分离固定元素然后重新插入它。

我无法在更改函数的正确位置正确插入静态 div。

CSS:

body {
    background: white !important;
}
.my_card_div{
    display:flex;
}
.sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sortable li {
    float: left;
}

.sortable_placeholder {
    border: 1px solid #eeeeee;
    width: 100px !important;
    height: 60px !important;
    background: #eeeeee !important;
    color: #777620 !important;
    border-radius: 10px !important;
    margin-right: 10px;
}

.mydiv{
    width: 100px !important;
    height: 60px !important;

}

.bg-red{
    background:red; 
}
.bg-yellow{
    background: yellow;
}
.bg-gray{
    background: gray;
}

HTML:

<div class="my_card_div  p-3" id="sortable"
         style="border: 2px solid gray;">
    <div class="mydiv bg-red">
        Test 1
    </div>
    <div class="mydiv static">
        <button type="button" class="  btn bg-tranparent  ">
            <img alt="next arrow"
                     src="https://i.dlpng.com/static/png/504728_preview.png"
                     height="40" width="40">
        </button>
    </div>
    <div class="mydiv  bg-yellow">
        Test 2
    </div>
    <div class="mydiv static">
        <button type="button" class="  btn bg-tranparent">
            <img alt="next arrow"
                     src="https://i.dlpng.com/static/png/504728_preview.png"
                     height="40" width="40">
        </button>
    </div>
    <div class="mydiv bg-gray">
        Test 3
    </div>
</div>

JS:

$("#sortable").sortable({
    items: ':not(.static)',
    start: function() {
        $('.static', this).each(function() {
            var $this = $(this);
            $this.data('pos', $this.index());
        });
    },
    placeholder: "sortable_placeholder",

    change: function(event, ui) {
        console.log('change', event, ui);
        $sortable = $(this);

        console.log($sortable);
        $statics = $('.static', this).detach();
        $helper = $('<div class="mydiv"></div>').prependTo(this);

        $statics.each(function() {
            var $this = $(this);
            var target = $this.data('pos');
            console.log(target)
            $this.insertAfter($('.mydiv', $sortable).eq(target));
        });
        $helper.remove();

    },
    update: function(event, ui) {
        console.log('update', event, ui);
    }
});

Answer 1

将 mydiv class 添加到可排序占位符。

创建一个静态元素列表和另一个可排序元素列表，不包括可排序助手和静态元素。

在可排序更改期间，遍历列表中的每个 .mydiv.static 元素，分离每个静态元素，然后将它们追加到 i 的每个可排序元素之后。

这里是fiddle.

$( "#sortable" ).sortable({
  items: '.mydiv:not(.static)',
  placeholder: "sortable_placeholder mydiv",
  change: function(event, ui) {
    var statics = $(this).find('.mydiv.static');
    var items = $(this).find('.mydiv').not('.static').not('.ui-sortable-helper');
    for (var i = 0; i < statics.length; i++) {
      var item = items.eq(i);
      var static = statics.eq(i).detach();
      item.after(static);
    }
  }
});

Jquery 可排序的水平列表不适用于固定项目

Jquery Sortable Horizontal list not working with fixed item

jquery

jquery-ui

jquery-ui-sortable