Jak mogę zapisać pozycje SortableJS w obiekcie? [duplikować]
Nov 20 2020
Próbuję stworzyć kwestionariusz, w którym użytkownicy oceniają obrazy od ulubionych do najmniej. Używam SortableJS, więc obrazy można przeciągać i upuszczać. Mam pozycję obrazów aktualnie w console.log.
Jednak staram się pchnąć go do słownika, więc może to być sformatowany jako: {0 : image2, 1:image1, 2:image3}. Pozwoliłoby mi to zobaczyć, jaki obraz znajduje się w każdym indeksie, więc gdy użytkownik kliknie przycisk Prześlij, można załadować 3 dodatkowe obrazy w celu ich oceny.
Czy ktoś może pomóc, jak to zrobić, aby to zrobić? Słownik nie będzie działał, a pozycje znajdują się obecnie w tablicy.
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>Odpowiedzi
1 TheBombSquad Nov 23 2020 at 22:59
Aby się upewnić, wszystko, co chcesz zrobić, to zasadniczo posortować obrazy w tablicy, prawda?
//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>