Calling a function from SortableJS to be a global variable

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

Solution

You can try

const serialize = () => {
    let serialized = []
    let images = document.querySelectorAll('[data-id]')
    images.forEach(image => serialized.push(lesson.src))
    return serialized
}

This function should return you array of img src in order like this:

['/Users/rankWebsite/images/image_3.jpg', ...]

or maybe something more useful:

const serialize = () => {
    let serialized = []
    let images = document.querySelectorAll('[data-id]')
    images.forEach(image => serialized.push(image.attributes['data-id'].nodeValue))
    return serialized
}

this should return you

['black', 'orange', 'white']

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:

var sorted = document.getElementById("rankedPicture")
Sortable.create(sorted, {
    group: "rankedImages",
    onEnd: function(e) {
         console.log(serialize())
    }