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

Posted 2023-05-08

【中文标题】Jquery可排序水平列表不适用于固定项目

【英文标题】：Jquery Sortable Horizontal list not working with fixed item

【发布时间】：2020-04-16 08:05:06

【问题描述】：

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

我见过一些例子，在可排序更改功能中，我可以分离固定元素，然后重新插入。

jsfiddle

我无法在更改功能的正确位置正确插入静态 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 
                     src="https://i.dlpng.com/static/png/504728_preview.png"
                      >
        </button>
    </div>
    <div class="mydiv  bg-yellow">
        Test 2
    </div>
    <div class="mydiv static">
        <button type="button" class="  btn bg-tranparent">
            <img 
                     src="https://i.dlpng.com/static/png/504728_preview.png"
                      >
        </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);
    
);

【参考方案1】：

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

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

在可排序更改期间，循环遍历列表中的每个 .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);
    
  
);