I am trying to make a website, where users can rank pictures in order of preference. As each user will be allocated random array of pictures, i therefore need to store, which img.src they have ranked in each position. Currently using sortable, it only references the id of the sorted images.
I am trying to call the ordered array which has been sorted using sortableJS. When i call it as displayed, it says "sortable is not defined." When i try to insert the functions getImageOrder(orderIds), getImageName(imageId), and extractNameFrom(imageSrc) inside the Sortable.create function, it does not recognise the img.src reference. Does anyone know how to make it a global variable so i can call it like this? I need to call it in this way, in order to see what img.src is in what order.
<html>
<h1> Rank Images </h1>
<h3> From 1 (most preference) to 3 (least preference) </h3>
<body class="body">
<div id="rankedPicture" class="images">
<img src="/Users/rankWebsite/images/image_3.jpg" data-id="black" id = "drag1" width="106" height="69">
<img src="/Users/rankWebsite/images/image_2.jpg" data-id="orange" id = "drag2" width="106" height="69">
<img src="/Users/rankWebsite/images/image_1.jpg" data-id="white" id = "drag3" width="106" height="69">
</div>
<br>
<br>
<div class="submit">
<button type="button"> Submit </button>
</div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/css/mainstyle.css"></script>
</body>
</html>
var sorted = document.getElementById("rankedPicture")
Sortable.create(sorted, {
group: "rankedImages",
store: {
/**
* Get the order of elements. Called once during initialization.
* @param {Sortable} sortable
* @returns {Array}
*/
get: function (sortable) {
var order = localStorage.getItem(sortable.options.group.name);
return order ? order.split("|") : [];
},
/**
* Save the order of elements. Called onEnd (when the item is dropped).
* @param {Sortable} sortable
*/
set: function (sortable) {
var order = sortable.toArray();
console.log(order)
window.sessionStorage.setItem("sorted", JSON.stringify(order))
},
},
});
var order = window.sessionStorage.getItem("sorted")
function getImageOrder(orderIds) {
var imageOrder = [];
for (i =0; i< orderIds.length; i++){
imageOrder[i] = getImageName(orderIds[i]);
}
return imageOrder;
}
function getImageName(imageId){
return extractNameFrom(document.getElementById(imageId).src)
}
function extractNameFrom(imageSrc){
return imageSrc.replace(/^.*[\\\/]/, '');
}
console.log(getImageOrder(order))
You can try
This function should return you array of img src in order like this:
['/Users/rankWebsite/images/image_3.jpg', ...]
or maybe something more useful:
this should return you
set method in SortableJS is called only onEnd event, so after you sort something. in order to get order of your items, you would do something like this: