javascript - 这个可在移动设备上运行的用户可排序列表的 HTML/JavaScript 等效项是什么？

Question

在我的 Java 桌面应用程序中，我有一个项目列表，用户可以通过选择项目并使用向上/向下按钮更改其在列表中的位置来更改其顺序。

在 HTML 中执行此操作的等效方法是什么？一个<select>不起作用，因为在移动设备上，无论大小设置为多少，选择都只显示一行。

Answer 1

使用 JavaScript，您可以非常轻松地自己实现这样的控件。这是一个非常快速但肮脏的示例，适用于现代浏览器(最值得注意的是，不适用于 Internet Explorer)。由于移动浏览器确实会火click当处理程序直接附加到元素时发生的事件，这也适用于移动/触摸设备。当然，您可能希望为移动设备实现稍微不同的布局，以便更轻松地单击元素。在触摸设备上实现元素的拖放以对其进行排序也可能更直观。

为了使其以常规旧形式工作，还可以添加和更新隐藏输入。为此，我们可以添加data attributes在选项上，因为它们可以轻松阅读 with JavaScript 。另一种选择是拦截表单的提交事件并通过 AJAX 手动执行提交，然后加载事件顺序。下面的演示实现了第一个选项:填充隐藏的输入。

function orderInput(list, upButton, downButton, input) {
  updateInput(list, input);

  // enable selection of list elements
  for (let li of list.querySelectorAll('li')) {
    li.addEventListener('click', () => {
      for (let sibling of li.parentNode.children) {
        if (!sibling.isSameNode(li)) {
          sibling.classList.remove('selected');
        }
      }
      li.classList.toggle('selected');
    });
  }

  // enable moving an element up
  upButton.addEventListener('click', () => {
    var li = list.querySelector('li.selected');
    if (li.previousElementSibling !== null) {
      li.parentNode.insertBefore(li, li.previousElementSibling);
      updateInput(list, input);
    }
  });

  // enable moving an element down
  downButton.addEventListener('click', () => {
    var li = list.querySelector('li.selected');
    if (li.nextElementSibling !== null) {
      li.parentNode.insertBefore(li, li.nextElementSibling.nextElementSibling);
      updateInput(list, input);
    }
  });
}

function updateInput(list, input) {
  var values = [];
  for (let li of list.querySelectorAll('li')) {
    values.push(li.dataset.value);
  }
  input.value = values.join(';');
}

// instantiate on our fruits
orderInput(
  document.querySelector('ul'),
  document.getElementById('up'),
  document.getElementById('down'),
  document.querySelector('input[name="fruits"]')
);

ul {
  padding-left: 0;
  list-style-type: none;
  border: 1px solid darkgray;
}

li {
  padding: 2px 4px;
}

li:nth-child(even) {
  background-color: lightgray;
}

li.selected {
  background-color: blue;
  color: white;
}

<p>Click an item in the list to select it, change its place in the list using the up and down buttons.</p>
<button id="up">Up</button> - <button id="down">Down</button>
<ul>
  <li data-value="red-apple">Apple</li>
  <li data-value="yellow-banana">Banana</li>
  <li data-value="cherries">Cherry</li>
  <li data-value="d-fruit">Dragon Fruit</li>
  <li data-value="old-berry">Elderberry</li>
  <li data-value="not-a-figure">Fig</li>
  <li data-value="blue-grape">Grape</li>
</ul>
<input type="hidden" name="fruits" />