Question

我正在构建一个HTML用户界面，允许我的用户按照他们想要的方式拖动或排序菜单或实用程序，类似于Android或iOS HOME屏幕。如何保存菜单位置？

＆＃13;

$(function() {
  $("#items").sortable({
    placeholder: "highlight",
    start: function(event, ui) {
      ui.item.toggleClass("highlight");
    },
    stop: function(event, ui) {
      ui.item.toggleClass("highlight");
    }
  });
  $("#items").disableSelection();
});

＆＃13;

.list {
  background-color: #478BFF;
  font-size: 30px;
  text-align: center;
  cursor: pointer;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  border: 1px solid gray;
}

#items .ui-selected {
  background: red;
  color: white;
  font-weight: bold;
}

#items {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#items li {
  float: left;
  margin: 2px;
  padding: 2px;
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.highlight {
  border: 1px solid red;
  font-weight: bold;
  font-size: 45px;
  background-color: lightblue;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div style="width:520px">
  <ul id="items">
    <li class="list">1</li>
    <li class="list">2</li>
    <li class="list">3</li>
    <li class="list">4</li>
    <li class="list">5</li>
    <li class="list">6</li>
    <li class="list">7</li>
    <li class="list">8</li>
    <li class="list">9</li>
    <li class="list">10</li>
    <li class="list">11</li>
    <li class="list">12</li>
    <li class="list">13</li>
    <li class="list">14</li>
    <li class="list">15</li>
    <li class="list">16</li>
    <li class="list">17</li>
    <li class="list">18</li>
    <li class="list">19</li>
    <li class="list">20</li>
    <li class="list">21</li>
    <li class="list">22</li>
    <li class="list">23</li>
    <li class="list">24</li>
    <li class="list">25</li>
    <li class="list">26</li>
    <li class="list">27</li>
    <li class="list">28</li>
  </ul>
</div>
<div id="info" style="font-family:Geneva,Arial,Helvetica,sans-serif;font-size:20px;"></div>

＆＃13;

Answer 1

简单的.map()将获取每个项目的当前位置：

＆＃13;

function save() {
  let positions = $.map(
    $('#items li'), 
    function(i){
      return parseInt($(i).text())
    });
  console.log(positions);
}

save();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width:520px">
  <ul id="items">
      <li class="list">1</li>
      <li class="list">2</li>
      <li class="list">3</li>
      <li class="list">4</li>
      <li class="list">5</li>
      <li class="list">6</li>
      <li class="list">7</li>
      <li class="list">8</li>
      <li class="list">9</li>
      <li class="list">10</li>
      <li class="list">11</li>
      <li class="list">12</li>
      <li class="list">13</li>
      <li class="list">14</li>
      <li class="list">15</li>
      <li class="list">16</li>
      <li class="list">17</li>
      <li class="list">18</li>
      <li class="list">19</li>
      <li class="list">20</li>
      <li class="list">21</li>
      <li class="list">22</li>
      <li class="list">23</li>
      <li class="list">24</li>
      <li class="list">25</li>
      <li class="list">26</li>
      <li class="list">27</li>
      <li class="list">28</li>
  </ul>
</div>

＆＃13;

当然，不是在页面加载时运行它，而是需要在单击按钮时绑定它。你也应该重命名它，所以它的名字不会与你真正想象不到的人所命名的其他功能相冲突。

旁注：每当您遇到需要为父级的所有子级提供相同的类时，请考虑从每个项中删除该类并使用父级对其进行样式设置。在您的示例中：

<ul id="items">
  <li>1</li>
  <li>2</li>
  ...
</ul>

您可以使用<li>代替#items>li{ ... }

设置#items .list{ ... }的样式

可拖动和可编辑的标题菜单

1 个答案: