时间戳

首页 > 解决方案 > 使用数据属性拖放嵌套列表顺序

javascript - 使用数据属性拖放嵌套列表顺序

问题描述

我有一个父子类别的拖放列表。当我点击测试按钮时，我想将数据属性设置为数字顺序。父数据属性当前有效。但我无法让子数据属性正常工作。

因此，对于每个父母，子类别应该是数字 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>

标签： javascriptjqueryhtml

解决方案

你应该只迭代你的类别一次：孩子总是在最后一个父母之后，所以跟踪并不难。

将此添加到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++);
        }
    });
}

推荐阅读