javascript - 可排序 - 更新现有数组 - jQuery
问题描述
我有一个现有的元素数组,例如:
arr=[{name:1,data:xyz},{name:2,data:abc},{name:3, data:lmn}; {name:4,data:opq}]
这些项目根据它们在 UI 上的名称填充。例子:1 2 3 4 5
我已经实现了 jQuery 的 Sortable。arr
在用户对上述元素执行拖放操作后,我希望根据元素的新位置更新现有数组,而不是创建新数组。
用户可以移动数组中存在的元素,arr
并且不能从1 2 3 4 5
元素列表之外引入任何拖动的对象,例如:2 可以移动到 5 或 1 可以移动到 3 等等。
元素 HTML:
<ul class= "tree-list">
<li class="li_class"><span class="span_class"> 1 </span></li>
<li class="li_class"><span class="span_class"> 2 </span></li>
<li class="li_class"><span class="span_class"> 3 </span></li>
<li class="li_class"><span class="span_class"> 4 </span></li>
<li class="li_class"><span class="span_class"> 5 </span></li>
</ul>
jQuery:
$(function() {
var data = $(".tree-list").sortable({
delay: 150,
axis: "y",
update: function(event, ui) {
var index = ui.item.index();
console.log("Moved to new position: " + index);
var children = $('ul.tree-list').children()
// What to do here
})
$( ".tree-list" ).disableSelection();
});
动态创建的数组:
someFunc(data){
let htmlString= " <ul class =\"tree-list\" "
for (let i=0; i<data.length; i++){
if(typeof(item) === "string"){
htmlString += "<li class=\" li_class \"" + item + "\">";
}
else if(typeof(item) === "object"){
htmlString += "<li>";
htmlString += "span class=\"span_class\""
}
htmlString += "</li>"
}
}
htmlString += "</ul>";
return (htmlString);
}
解决方案
我尝试使用初始数组重新创建您的示例:
我所做的是,首先data-previndex
使用 start srotable 创建以在 li 位置更新上存储以前的索引:(归功于这个答案)
然后每次更新,根据先前和当前索引调用 js 数组上更新元素的(此答案array_move
的学分)
请参阅下面的工作片段:
$(function() {
let arr = [{name:1,data:"xyz"}, {name:2,data:"abc"}, {name:3, data:"lmn"}, {name:4,data:"opq"}, {name:5,data:"stu"}]
let $treeList = $(".tree-list");
arr.forEach(element => {
let liNode = `<li class="li_class"><span class="span_class"> ${element.name} </span></li>`
$treeList.append(liNode);
})
var data = $(".tree-list").sortable({
delay: 150,
axis: "y",
start: function(e, ui) {
// creates a temporary attribute on the element with the old index
// credits to this answer https://stackoverflow.com/questions/1601827/jquery-ui-sortable-how-to-determine-current-location-and-new-location-in-update
$(this).attr('data-previndex', ui.item.index());
},
update: function(event, ui) {
var newIndex = ui.item.index();
var oldIndex = $(this).attr('data-previndex');
var children = $('ul.tree-list').children()
// What to do here
arr = array_move(arr, oldIndex, newIndex);
console.clear()
console.log(JSON.stringify(arr));
}
});
$(".tree-list").disableSelection();
});
function array_move(arr, old_index, new_index) {
if (new_index >= arr.length) {
var k = new_index - arr.length + 1;
while (k--) {
arr.push(undefined);
}
}
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
return arr;
};
@import url("https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul class="tree-list">
</ul>
推荐阅读
- excel - Excel VBA 宏后期绑定
- reactjs - TypeScript 允许一个函数作为与函数签名的参数冲突的 React 道具?
- android - 如何在没有对象键的情况下获取任何对象内的 Date 对象?
- php - Laravel Dusk 无法读取未定义的点击
- powershell - 在远程主机上查找服务帐户
- regex - 为什么“目录表达式”没有在 Linux 服务器上使用正则表达式创建动态文件夹 ddMMyyyy?
- java - 过滤 IP 远程 SFTP
- shell - 普遍逃避美元符号
- css - 扫到右边的过渡css
- python - 我可以切片像numpy这样的列表吗?