如何将 SortableJS 位置保存到对象？ [复制]答案

【问题标题】：How can I save SortableJS positions to an object? [duplicate]如何将 SortableJS 位置保存到对象？ [复制]
【发布时间】：2021-03-03 22:39:47
【问题描述】：

我正在尝试创建一个调查问卷，让用户将图像从最喜欢到最少排列。我正在使用 SortableJS，因此可以拖放图像。我有当前在 console.log 中的图像位置。

但是，我正在尝试将其推送到字典中，以便将其格式化为：{0 : image2, 1:image1, 2:image3}。这可以让我看到每个索引处的图片，因此当用户点击提交时，可以再加载 3 张图片进行排名。

任何人都可以帮助如何让它做到这一点？字典不起作用，位置当前在数组中。

var ranked = {}
window.sessionStorage.setItem("ranked", JSON.stringify(ranked));

$( function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
} );

$(function () {
    $("#items").sortable({
        start: function (event, ui) {
            ui.item.toggleClass("highlight");
        },
        stop: function (event, ui) {
            ui.item.toggleClass("highlight");
            var order = $(this).sortable('toArray');
            var positions = order.join(';');
            var rank = positions;
            console.log(rank);

            var result = $(this).sortable('toArray', {rank: 'value'});
            console.log(result)


        }
    });
    $("#items").disableSelection();
});

<html> 
    <header> 
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/Users/rankWebsite/css/mainstyle.css">
    </header>

<body class=body> 

<h1> Rank Images</h1>
<hr>

<div class="images">
<div id="items">
        <img src="/Users/rankWebsite/images/image_1.jpg" id ="image1" style="width:150px;height:150px" >
        <img src="/Users/rankWebsite/images/image_2.jpg" id="image2" style="width:150px;height:150px">
        <img src="/Users/rankWebsite/images/image_3.jpg" id="image3" style="width:150px;height:150px">

</div>
</div>

<div class="button"> 
<button type="submit" onclick="submit()">Submit</button>
</div>


</body>
</html>

【问题讨论】：

一旦用户完成对多个图像数组的排名，我将使用 firebase 推送我的结果。我需要在位置上使用图像 1、图像 2 等的 src，因为每个用户都会以不同的顺序随机分配不同的数组。
不过，您似乎只需要获取一个数组，循环遍历它，然后构建一个对象（JavaScript 没有字典）。这有什么帮助吗？ stackoverflow.com/questions/4215737/convert-array-to-object
这正是我所需要的！抱歉，这是一个基本问题，编程不是我的技能！非常感谢

标签： javascript jquery-ui-sortable ranking sortablejs

【解决方案1】：

只是为了确保，您想要做的只是将图像排序在一个数组中基本上正确吗？

//i just gave the example of how to store the images as the data you wanted
function getArrayOfPictures(){
  var items=$('#items')[0].childNodes //change this to wherever the list of images are stored
  return Object.keys(items) //returns an array of each KEY of ITEMS
  .filter(a=>items[a].tagName=="IMG") //returns ONLY the image elements
  .map(a=>{
    var arr=items[a].src.split('/')
    return arr[arr.length-1]
  }) //formats it to have just the name of the img after the last '/'
  //stores data how you would like it(and when the order changes everytime you run this function it would return the ordering of it as well)
}



var itemList=getArrayOfPictures()

console.log(itemList)



var itemPointer=Object.keys(items).filter(a=>items[a].tagName=="IMG") //points to the actual image elements for more advanced things you might want to do

<html> 
    <header> 
        


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    </header>

<body class=body> 

<h1> Rank Images</h1>
<hr>

<div class="images">
<div id="items">
        <img src="https://cdn.akc.org/content/hero/puppy_pictures_header.jpg" id ="image1" style="width:150px;height:150px" >
        <img src="https://www.firstforwomen.com/wp-content/uploads/sites/2/2019/07/puppy-eyes.jpg?w=715" id="image2" style="width:150px;height:150px">
        <img src="https://parade.com/wp-content/uploads/2018/03/golden-puppy-life-national-geographic-ftr.jpg" id="image3" style="width:150px;height:150px">

</div>
</div>

<div class="button"> 
<button type="submit" onclick="submit()">Submit</button>
</div>


</body>
</html>

【讨论】：

是的，我打算将所有图像存储在排序数组中，但是，由于每个用户都获得了随机图像数组，我想存储 (img.src.slice) 名称而不是元素 id (image1)
好的，给我 30 秒
@user14578710 我改变了地图的作用.. 现在用它试试你的图片
大声笑忘了把 arr.length-1 部分.. @user14578710 现在准备好了：}
您知道如何在 javacript 中执行此操作吗？由于更熟悉 javascript，我现在更改了语言