Wie kann ich SortableJS-Positionen in einem Objekt speichern? [Duplikat]
Ich versuche, einen Fragebogen zu erstellen, in dem Benutzer Bilder vom Favoriten bis zum niedrigsten bewerten. Ich verwende das SortableJS, damit die Bilder per Drag & Drop verschoben werden können. Ich habe die Position der Bilder aktuell in der console.log.
Ich versuche jedoch, es in ein Wörterbuch zu verschieben, damit es wie folgt formatiert werden kann : {0 : image2, 1:image1, 2:image3}. Auf diese Weise kann ich sehen, welches Bild sich in jedem Index befindet. Wenn der Benutzer auf Senden klickt, können 3 weitere Bilder geladen werden, um eine Rangfolge zu erhalten.
Kann jemand helfen, wie man es dazu bringt? Das Wörterbuch funktioniert nicht und die Positionen befinden sich derzeit in einem 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>Antworten
Um sicherzugehen, müssen Sie die Bilder nur in einem Array sortieren lassen, oder?
//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>