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

我正试图建立一个网站，在那里用户可以排名图片的优先顺序。由于每个用户都将被分配随机的图片数组，因此我需要存储他们在每个位置排名的img.src。当前使用sortable，它只引用已排序图像的id

我试图调用已使用sortableJS排序的有序数组。当我按显示方式调用它时，它说“sortable未定义”。当我尝试在sortable.create函数中插入函数getImageOrder（orderId）、getImageName（imageId）和extractNameFrom（imageSrc）时，它无法识别img.src引用。有人知道如何使它成为一个全局变量，这样我就可以这样称呼它了吗？我需要以这种方式调用它，以便查看img.src的顺序

排名图像
从1（最大偏好）到3（最小偏好）




提交

您可以试试

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

此函数应按如下顺序返回img src数组：

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

['/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
}

这应该还给你

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

SortableJS中的set方法被称为onEnd事件，所以在排序之后。为了获得物品的顺序，您可以执行以下操作：

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

---

我现在试着运行你的代码，看看它是如何工作的，如何初始调用div类课程？我在html代码中添加了一些内容，试图让你理解，目前它存储{黑色，橙色，白色}但是，我需要它来存储黑色的img.src，橙色的img.src等等，那么就不可能按照我最初的想法来做吗？@user14578710嗯，也许你能解释一下你想要实现什么？@user14578710我试图解释的是：var order=window.sessionStorage.getItem（“sorted”）这将是空的，因为，这个set:function（sortable）{我在主要问题中添加了额外的细节，试图让它更清楚一点