javascript - 移动可排序的 div 后获取 jQuery 排序顺序
问题描述
我使用 jQuery 的可排序功能创建了可以被描述为水平看板的东西。我现在需要将新的排序顺序发送到后端,我很难弄清楚如何准确地捕获新的排序顺序。
在 HTML 标记中,“id”是对象的 pk,“data-sort”是当前排序顺序。
我怀疑我需要两个不同的功能。当行顺序更改时,一个用于 POST,当行中的项目更改时,第二个用于 POST。
该片段为我提供了我移动的项目的 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
还有一个片段:
$(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();
});
.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%
}
<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>
解决方案
update
我们可以在您的函数中使用以下语法访问父级及其子级:(
请参阅 JS 代码中的注释)
$(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();
});
.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%
}
<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>
.find()
查找所有满足所需查询的孩子。
希望它有帮助!