Comment puis-je enregistrer les positions SortableJS dans un objet? [dupliquer]
J'essaie de créer un questionnaire où les utilisateurs classent les images de la préférée au moins. J'utilise SortableJS pour que les images puissent être glissées et déposées. J'ai la position des images actuellement dans le console.log.
Cependant, je suis en train de le pousser à un dictionnaire afin qu'il puisse être formaté comme suit: {0 : image2, 1:image1, 2:image3}. Cela me permettrait de voir quelle image se trouve à chaque index, donc lorsque l'utilisateur clique sur Soumettre, 3 images supplémentaires pourraient être chargées pour être classées.
Quelqu'un peut-il aider à le faire faire? Le dictionnaire ne fonctionnera pas et les positions sont actuellement dans un tableau.
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>Réponses
Juste pour être sûr, tout ce que vous souhaitez faire est de trier les images dans un tableau, n'est-ce pas?
//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>