从 SortableJS 调用函数作为全局变量

Question

我正在尝试制作一个网站，用户可以在其中按喜好对图片进行排名。由于每个用户将被分配随机的图片数组，因此我需要存储他们在每个位置上排名的img.src。目前使用sortable，它只引用排序图像的id。

我正在尝试调用已使用 sortableJS 排序的有序数组。当我按显示方式调用它时，它说“未定义可排序”。当我尝试在 Sortable.create 函数中插入函数 getImageOrder(orderIds)、getImageName(imageId) 和 extractNameFrom(imageSrc) 时，它无法识别 img.src 引用。有谁知道如何使它成为全局变量以便我可以这样称呼它？我需要这样调用它，以便查看 img.src 是什么顺序。

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

Answer 1

你可以试试

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

这个函数应该 return 你的 img src 数组按如下顺序排列：

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

或者更有用的东西：

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

这应该return你

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

SortableJS 中的 set 方法只调用 onEnd 事件，所以在你排序之后。为了得到你的物品的顺序，你会做这样的事情：

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

从 SortableJS 调用函数作为全局变量

Calling a function from SortableJS to be a global variable

html

javascript

ranking

rank

sortablejs