Question

在下面的HTML代码中，我在每个LI元素之前都有注释，并且我希望在对LI元素进行排序时将它们移动。有没有办法使用jQuery UI Sortable链接他们的动作？ JSFiddle

<ul id="sortable">
    <!--Item 1-->
    <li>Item 1</li>
    <!--Item 2-->
    <li>Item 2</li>
    <!--Item 3-->
    <li>Item 3</li>
    <!--Item 4-->
    <li>Item 4</li>
    <!--Item 5-->
    <li>Item 5</li>
</ul>

Answer 1

如果有人也在努力实现这一目标，我可以用这段代码来做到这一点：

<ul id="sortable">
  <!--Item 1-->
  <li>Item 1</li>
  <!--Item 2-->
  <li>Item 2</li>
  <!--Item 3-->
  <li>Item 3</li>
  <!--Item 4-->
  <li>Item 4</li>
  <!--Item 5-->
  <li>Item 5</li>
</ul>

var theComment;
$("#sortable").sortable({
  items: '> li',
  start : function(e, ui) {
     theComment = ui.item.context.previousSibling;
  },
  update: function(e, ui){
    if (ui.item.context.previousSibling.nodeType === 8) {
      ui.item.insertBefore(ui.item.context.previousSibling);
   } else if (ui.item.context.previousSibling.nodeType === 1) {
     ui.item.insertAfter(ui.item.context.previousSibling);
   }
     ui.item.before(theComment);
   }
});

我应该指出的一件事是我的代码缩小了，因此.previousSibling不会显示换行符或缩进。如果您的代码没有缩小，则此代码不适合您。 JSFiddle Minified HTML

更新：即使您的代码没有缩小，此JSFiddle也应该有效。

使用Sortable移动代码注释

1 个答案: