Question

我有一个父级和子级的拖放列表。我想在按下测试按钮时将数据属性设置为数字顺序。父数据属性当前有效。但是我很难让子数据属性正常工作。

因此，对于每个父级，子级类别应为数字1,2,3 ...，然后应为下一个父级重置计数。现在，孩子不会重置为新的父母。如何让孩子引用其父母，以便可以重置计数器？

不确定这是否是实现此目的的最佳方法。最终目标是获取这些数据属性，并使用该数字来更新数据库中的orderId。

$(".categories").sortable({
  connectWith: ".categories",
  placeholder: "placeholder",

  start: function(event, ui) {
    if (ui.helper.hasClass('child-category')) {
      ui.placeholder.removeClass('placeholder');
      ui.placeholder.addClass('placeholder-sub');
    } else {
      ui.placeholder.removeClass('placeholder-sub');
      ui.placeholder.addClass('placeholder');
    }
  },
  sort: function(event, ui) {
    var pos;
    if (ui.helper.hasClass('child-category')) {
      pos = ui.position.left + 20;
      $('#cursor').text(ui.position.left + 20);
    } else if (ui.helper.hasClass('parent-category')) {
      pos = ui.position.left;
      $('#cursor').text(ui.position.left);
    }
    if (pos >= 32 && !ui.helper.hasClass('child-category')) {
      ui.placeholder.removeClass('placeholder');
      ui.placeholder.addClass('placeholder-sub');
      ui.helper.addClass('child-category');
      ui.helper.removeClass('parent-category');

    } else if (pos < 25 && ui.helper.hasClass('child-category')) {
      ui.placeholder.removeClass('placeholder-sub');
      ui.placeholder.addClass('placeholder');
      ui.helper.removeClass('child-category');
      ui.helper.addClass('parent-category');
    }
  }
});

               
            $(".category").attr("data-order-parent", "");
            $(".category").attr("data-order-child", "");
            var i = 1;
            $(".parent-category").each(function() {
                $(this).attr("data-order-parent", i);
                var j = 1;
                $(".child-category").each(function() {
                    $(this).attr("data-order-child", j);
                    j++;
                });
                i++;
            });

.categories {
  list-style: none outside none;
}

.category {
  background: #fff;
  border: 1px solid #ddd;
  cursor: move;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  width: 480px;
}

.category:hover {
  background-color: #F5F5F5;
}

.child-category {
  margin-left: 40px;
  width: 440px;
}

.placeholder {
  background: #fff;
  border: 1px dashed #ccc;
  height: 50px;
  width: 480px;
}

.placeholder-sub {
  background: #fff;
  border: 1px dashed #ccc;
  height: 50px;
  width: 440px;
  margin-left: 40px;
}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>


<button id="TEST" type="button">TEST</button>

<ul class='categories'>
  <li class="category parent-category" data-order-parent="" data-order-child="">
    categoryName-1
  </li>
  <li class="category parent-category" data-order-parent="" data-order-child="">
    categoryName-2
  </li>
  <li class="category parent-category" data-order-parent="" data-order-child="">
    categoryName-3
  </li>
  <li class="category parent-category" data-order-parent="" data-order-child="">
    categoryName-4
  </li>
</ul>

Answer 1

您应该只对类别进行一次迭代：孩子们总是紧随其后的父母，所以保持追踪并不是那么困难。

将其添加到sortable对象参数：

stop: function(event, ui) {
    $(".category").attr("data-order-parent", "");
    $(".category").attr("data-order-child", "");
    var i = 1, j = 1;
    $(".category").each(function() { // Iterate all categories (not only parents)
        if ($(this).is(".parent-category")) { // Is it parent or child?
            $(this).attr("data-order-parent", i++);
            j = 1; // Reset child counter
        } else {
            $(this).attr("data-order-child", j++);
        }
    });
}

拖放具有数据属性的嵌套列表顺序

1 个答案: