jQuery Sortable — 项目选择器的问题答案

【问题标题】：jQuery Sortable — issue with items selectorjQuery Sortable — 项目选择器的问题
【发布时间】：2023-04-05 10:05:01
【问题描述】：

我正在使用 jQuery UI 中的 Sortable 插件。让它完美运行，但我不想排序，也不能将其他项目拖到第一个项目之上。我将此项目用作组的标题/标题，并且始终希望它固定在第一个位置。

查看 jQuery 文档，看起来我应该使用项目选择器，但这会破坏整个脚本。

有什么想法吗？请参阅下面的代码和指向 JSFiddle 的链接。

HTML：

<div class="cart-group">
    <div class="cart-item no-drag">
        Title Div               
    </div>
</div>

<div class="cart-group"> 
    <div class='cart-item'>
        Cart Item
    </div>
    <div class='cart-item'>
        Cart Item
    </div>
    <div class='cart-item'>
        Cart Item
    </div>
</div>

JS：

$(".cart-group").sortable({
    connectWith: '.cart-group',
    opacity: 0.4,
    tolerance: 'pointer',
    cancel: '.no-drag',
    items:  'div:not(.no-drag),
}).disableSelection();

到 JSFiddle 的链接：http://jsfiddle.net/fZCfh/

使用 jQuery 1.7.2 和 jQuery UI 1.8.18。

【问题讨论】：

这对我有用吗？ jsfiddle.net/fZCfh/3
啊，抱歉——我应该澄清一下。我不希望用户能够将项目拖到 Title 项目（加载的第一个项目）上方。
哦，好的。那你为什么不把标题移出包装器呢？将它放在购物车组之外或使用另一个类作为可排序包装器？
喜欢这个 -> jsfiddle.net/fZCfh/6

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

您为什么将购物车组用作标题和商品的同一类？为标题创建一个新类。那么它就不会受到与物品相同的规则。

<div class="cart-group-title">
    Title Div               
</div>
<div class="cart-group"> 
   <div class='cart-item'>
     Cart Item
  </div>
  <div class='cart-item'>
     Cart Item
  </div>
  <div class='cart-item'>
     Cart Item
  </div>

【讨论】：