How can I save SortableJS positions to an object? [duplicate]

问题

I am trying to create a questionnaire where users rank images from favourite to least. I am using the SortableJS so the images can be dragged and dropped. I have the position of the images currently in the console.log.

However, I am trying to push it to a dictionary so it could be formatted as: {0 : image2, 1:image1, 2:image3}. This would allow me to see what image is at each index, so when the user clicks submit, 3 more images could be loaded in to be ranked.

Can anyone help how to get it to do this? The dictionary will not work, and the positions are currently in an array.

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>

回答1:

Just to make sure, ALL you wish to do is have the images sorted in an array basically right?

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

来源：https://stackoverflow.com/questions/64930741/how-can-i-save-sortablejs-positions-to-an-object

标签

javascript

jquery-ui-sortable

ranking

sortablejs