Question

我正在使用多维矩阵，我想在其中对行进行排序。

问题的第一部分是，我只想要具有相同属性的元素进行排序：

（实际结构更复杂，但我的问题将在这个例子中得到解决，我将能够将它投射到我的结构中......）

HTML：

<!-- header for each horizontal item -->
<div class="sortable">
    <div class="head">ItemID</div>
    <div class="sortItemHead" parent-id="0">1</div>
    <div class="sortItemHead" parent-id="1">2</div>
    <div class="sortItemHead" parent-id="1">3</div>
    <div class="sortItemHead" parent-id="0">4</div>
    <div class="sortItemHead" parent-id="0">5</div>
</div>

<!-- values for each horizontal key/value pair-->
<div class="sortable">
    <div class="head">Name</div>
    <div class="sortItem" parent-id="0">Name 1</div>
    <div class="sortItem" parent-id="1">Name 2</div>
    <div class="sortItem" parent-id="1">Name 3</div>
    <div class="sortItem" parent-id="0">Name 4</div>
    <div class="sortItem" parent-id="0">Name 5</div>
</div>
[...and so on...]

JS：

jQuery(".sortable:has(.sortItemHead)").sortable({
   items:".sortItemHead:not(.disbaled)",
   cancel:".disabled",
   start:function(event,ui){
      var parentID = ui.item.attr("parent-id");

      jQuery(".sortItemHead[parent-id!='"+parentID+"']").addClass("disbaled");
      jQuery(".sortItemHead[parent-id='"+parentID+"']").removeClass("disbaled");
   },
   stop:function(){
      jQuery(".sortItemHead").removeClass("disbaled");
   }
});

...这样，在开始排序时设置了禁用...遗憾的是，可排序的项目不会以这种方式更新...一个肮脏的解决方法是应用多个可排序的

items:".sortItemHead[parent-id='"+parentID+"']"

...但是，这将是非常丑陋的代码....必须有另一种方式...

问题的第二部分是我希望项目保持同步。只有头部可以被移动......其他项目的行为应该像被拖动的头部物品......所以对于所有可排序的物品，手柄将是相应的头部元素

[UPDATE]

问题第1部分通过添加

解决

jQuery(".sortable:has(.sortItemHead)").sortable( "refresh" );

......它不是完美的强悍，完美的是让具有相同父亲身份的物品与父母一起移动......

[UPDATE] fiddlin的小提琴＆＃39;：http://jsfiddle.net/k34CZ/1/ ...请注意，将带有parent-id 1的元素与相应的元素一起移动会很好....但是目前这是可选的......还要注意你是＆＃39; nt能够移动＆＃34; 1＆＃34;元素回到顶部，如果你把我搬走......

jQuery Sortable：连接列表和属性排序

0 个答案: