如何将 SortableJS 位置保存到对象中？

Question

我正在尝试创建一个调查问卷，让用户对图像进行从最喜欢到最不喜欢的排序。我正在使用 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>

Answer 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>

如何将 SortableJS 位置保存到对象中？

How can I save SortableJS positions to an object?

javascript

jquery-ui-sortable

ranking

sortablejs