我怎样才能把按钮放在最后一个顺序？

Question

这个问题太复杂了。请帮忙..。

所以我有两个按钮，你可以在1。图片中看到。在重新加载页面后，我希望按钮与我排序的顺序相同。

导入脚本：

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.5.3/muuri.min.js"></script>

按HTML代码排序

<div class="grid">
  <div class="item">
    <a>
        <div class="card-primary" style="width-min: 18rem;">
            <div class="card-body">
                <h5 class="card-title">Test</h5>
                <p class="card-text">asdasd</p>
            </div>
        </div>
     </a>
  </div>

  <div class="item">
    <a>
        <div class="card-info" style="width-min: 18rem;">
            <div class="card-body">
                <h5 class="card-title">asd</h5>
                <p class="card-text">asd</p>
            </div>
        </div>
     </a>
  </div>
</div>

按我分类

(与穆里)

const grid = new Muuri(".grid", {
    dragEnabled: false
});

问题：

我希望当页面重新加载时，按钮与我上次排序的顺序是正确的。

(否则HTML代码将按standart顺序带来按钮.这就是问题所在)

我尝试了很多东西，比如列表，用sql更新了数据库，但是似乎没有什么效果，所以有人能帮我提供一些提示或者一些代码吗？那就太好了！

Answer 1

我建议您在每次发生顺序更改时将订单存储到local storage，然后当页面重新加载时，首先检查local storage是否有任何预先设置的订单。

我还建议您为每一张卡提供一些标识符属性，这样就可以轻松地访问它，而不是需要通过内部文本来识别它们。

document.querySelector('the-sort-button').addEventListener('toggle-or-smth', () => {
  let order = getCardsOrder();
  localStorage.setItem("cardOrder", order);
});

现在，在脚本的开头，您需要检查以前的订单。

window.addEventListener('load', () => {
  let order = localStorage.getItem("cardOrder");
  if (order !== null) setCardsOrder(order);
});

getCardsOrder和setCardsOrder的实现对我来说相当模糊，因为我不熟悉您正在使用的插件，但我希望这能给您一个总体指导。