将数组中某项的索引改为与html元素对应

Question

我动态地添加元素到容器，然后使用jquery UI来改变动态元素的位置，它工作得很好。动态元素通过循环遍历数组来构造。我想要实现的是，当我改变动态元素的位置时，我也想把数组项的索引改变为相应的值。当我将一些动态元素移动到另一个位置时，我在下面所做的尝试是有效的，但在其他位置却会混乱。我该如何解决这个问题?提前谢谢。

更新:长话短说，绿色块上的数字应该与数组中的数字相同(位置也相同)

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;
};
let myArr = [1, 2, 3, 4]
for (var i = 0; i < myArr.length; i++) {
$('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
}
let firstIndex;
let secondIndex;
$('.container').sortable({
update: function(event, div) {
firstIndex = div.item.attr('id')
},
stop: function(event, div) {
secondIndex = div.item.index()
array_move(myArr, firstIndex, secondIndex)
console.log(myArr)
}
})

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
height: fit-content;
padding: 3%;
background-color: yellow;
}
.wrapper {
display: flex;
width: 15vw;
height: 8vh;
cursor: pointer;
margin-bottom: 5%;
background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<div class="container">
</div>

更新2:这是我问题的工作版本。如有任何改进，我们都很感激。

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;
};
let myArr = [1, 2, 3, 4]
for (var i = 0; i < myArr.length; i++) {
$('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
}
$('.container').sortable({
stop: function(event, div) {
let elemId = div.item.attr('id')
let elemIndex = div.item.index()
array_move(myArr, elemId, elemIndex)
$('.container').html(``)
for (var i = 0; i < myArr.length; i++) {
$('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
}
console.log(myArr)
}
})

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
height: fit-content;
padding: 3%;
background-color: yellow;
}
.wrapper {
display: flex;
width: 15vw;
height: 8vh;
cursor: pointer;
margin-bottom: 5%;
background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<div class="container">
</div>

Answer 1

您给出的是索引的ID，而不是数组的内容。

这个版本可以处理Object数组

let myArr = [{
"item": 0
},
{
"item": 1
},
{
"item": 2
},
{
"item": 3
}
];
const orgArr = myArr.slice(0); // copies a simple onedimentional array
const $container = $('.container');
for (var i = 0; i < myArr.length; i++) {
$container.append(`<div class="wrapper" data-orgindex="${i}"></div>`)
}

$container.sortable({
stop: function(event, div) {
const sortOrder = $(".wrapper").map(function() {
return this.dataset.orgindex
}).get();
myArr = sortOrder.map(idx => orgArr[idx])
console.log(sortOrder, myArr)
}
})

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
height: fit-content;
padding: 3%;
background-color: yellow;
}
.wrapper {
display: flex;
width: 15vw;
height: 8vh;
cursor: pointer;
margin-bottom: 5%;
background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<div class="container">
</div>