文章/答案/技术大牛

发布

社区首页 >问答首页 >从SortableJS调用函数作为全局变量

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

Stack Overflow用户

提问于 2020-12-01 18:41:04

回答 1查看 153关注 0票数 0

我正在尝试做一个网站，在那里用户可以按喜好的顺序排列图片。由于每个用户将被分配到随机的图片阵列，因此我需要存储他们在每个位置中排名的img.src。目前使用sortable，它只引用排序图像的id。

我正在尝试调用已使用sortableJS排序的有序数组。当我将其称为displayed时，它会显示"sortable is not defined“。当我尝试将函数getImageOrder(orderIds)、getImageName(imageId)和extractNameFrom(imageSrc)插入到Sortable.create函数中时，它无法识别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))

html

ranking

rank

sortablejs

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-01 19:24:11

你可以试试

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

此函数应按如下顺序返回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
}

这应该会返回您

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

SortableJS中的set方法仅被称为onEnd事件，因此在对某些内容进行排序之后。为了获得商品的顺序，你可以这样做：

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65088969

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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