移动可排序的div后获取jQuery排序顺序

时间：2018-05-01 15:48:47

标签： javascript jquery

我使用jQuery的可排序功能创建了可以被描述为水平看板的东西。我现在需要将新的排序顺序发送到后端，并且我很难弄清楚如何准确捕获新的排序顺序。

在HTML标记中，＆＃34; id＆＃34;是对象的pk和＆＃34;数据排序＆＃34;是当前的排序顺序。

我怀疑我需要两种不同的功能。一行在行顺序更改时发布，第二次发布时行中的项目发生更改。

这段代码为我提供了我移动的项目的ID和新排序位置，但我无法弄清楚如何获取父母中的所有div（或其兄弟姐妹） ）。

$(function() {
    $(".swim-lane-wrapper").sortable({
        axis: "Y",
        handle: ".category-card",
        connectWith: ".swim-lane-wrapper",

        update: function(event, ui) {
            console.log(ui.item.context.children["0"].id)
            console.log(ui.item.index())
        },
    });
});

这里是jsFiddle

和一个片段：

＆＃13;
＆＃13; 
$(function() {
  $(".swim-lane-wrapper").sortable({
    axis: "Y",
    handle: ".category-card",
    connectWith: ".swim-lane-wrapper",

    update: function(event, ui) {
      console.log(ui)
    },
  })
});

$(function() {
  $(".item-row-wrapper")
    .sortable({
      connectWith: ".item-row-wrapper",
      update: function(event, ui) {},
    })
    .disableSelection();
});
＆＃13; 
.swim-lane-wrapper {}

.swim-lane {
  display: inline-block;
  white-space: nowrap;
  float: left;
  width: 100%;
  height: 100%;
  border: 1px solid grey;
  padding: 5px;
  margin-bottom: 3px;
}

.category-card {
  display: inline-block;
  white-space: nowrap;
  float: left;
  background-color: #FFF3CC;
  border: #DFBC6A 1px solid;
  width: 200px;
  height: 85px;
  line-height: 85px;
  margin-right: 10px;
  box-shadow: 2px 2px 2px #999;
  cursor: move;
}

.category-text {
  padding: 0px 8px 0px 8px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  vertical-align: middle;
  height: 80%
}

.item-card {
  display: inline-block;
  vertical-align: top;
  background-color: #edf3ff;
  border: #6d71db 1px solid;
  min-width: 100px;
  height: 85px;
  line-height: 85px;
  margin-right: 10px;
  box-shadow: 2px 2px 2px #999;
  cursor: move;
}

.item-text {
  padding: 0px 8px 0px 8px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  vertical-align: middle;
  height: 80%
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div class="swim-lane-wrapper">

  <div class="swim-lane">
    <!-- Category -->
    <div class="category-card" id="1" data-sort="1">
      <div class="category-text">
        <span>Category 1</span>
      </div>
    </div>

    <!-- Items -->
    <div class="item-row-wrapper">
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 11</span>
        </div>
      </div>
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 12</span>
        </div>
      </div>
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 13</span>
        </div>
      </div>
    </div>
  </div>

  <div class="swim-lane">
    <!-- Category -->
    <div class="category-card" id="2" data-sort="2">
      <div class="category-text">
        <span>Category 2</span>
      </div>
    </div>

    <!-- Items -->
    <div class="item-row-wrapper">

      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 21</span>
        </div>
      </div>
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 22</span>
        </div>
      </div>
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 23</span>
        </div>
      </div>
    </div>


  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我们可以在update函数中使用此语法访问父级及其子级：
（参见JS代码中的注释）

＆＃13;
＆＃13; 
$(function() {
  $(".swim-lane-wrapper").sortable({
    axis: "Y",
    handle: ".category-card",
    connectWith: ".swim-lane-wrapper",

    update: function(event, ui) {
      /* Modified here */
      var parent = ui.item.parent();
      $(parent).find('.category-card').each(function(i){
        console.log("ID of elm", i, ":", $(this).attr("id"));
      });
      
    },
  })
});

$(function() {
  $(".item-row-wrapper")
    .sortable({
      connectWith: ".item-row-wrapper",
      update: function(event, ui) {},
    })
    .disableSelection();
});
＆＃13; 
.swim-lane-wrapper {}

.swim-lane {
  display: inline-block;
  white-space: nowrap;
  float: left;
  width: 100%;
  height: 100%;
  border: 1px solid grey;
  padding: 5px;
  margin-bottom: 3px;
}

.category-card {
  display: inline-block;
  white-space: nowrap;
  float: left;
  background-color: #FFF3CC;
  border: #DFBC6A 1px solid;
  width: 200px;
  height: 85px;
  line-height: 85px;
  margin-right: 10px;
  box-shadow: 2px 2px 2px #999;
  cursor: move;
}

.category-text {
  padding: 0px 8px 0px 8px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  vertical-align: middle;
  height: 80%
}

.item-card {
  display: inline-block;
  vertical-align: top;
  background-color: #edf3ff;
  border: #6d71db 1px solid;
  min-width: 100px;
  height: 85px;
  line-height: 85px;
  margin-right: 10px;
  box-shadow: 2px 2px 2px #999;
  cursor: move;
}

.item-text {
  padding: 0px 8px 0px 8px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  vertical-align: middle;
  height: 80%
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div class="swim-lane-wrapper">

  <div class="swim-lane">
    <!-- Category -->
    <div class="category-card" id="1" data-sort="1">
      <div class="category-text">
        <span>Category 1</span>
      </div>
    </div>

    <!-- Items -->
    <div class="item-row-wrapper">
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 11</span>
        </div>
      </div>
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 12</span>
        </div>
      </div>
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 13</span>
        </div>
      </div>
    </div>
  </div>

  <div class="swim-lane">
    <!-- Category -->
    <div class="category-card" id="2" data-sort="2">
      <div class="category-text">
        <span>Category 2</span>
      </div>
    </div>

    <!-- Items -->
    <div class="item-row-wrapper">

      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 21</span>
        </div>
      </div>
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 22</span>
        </div>
      </div>
      <div class="item-card">
        <div class="item-text">
          <span class="sort-item">Item 23</span>
        </div>
      </div>
    </div>


  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

.find()查找满足所需查询的所有孩子。

希望它有用！

相关问题
最新问题