什么是可在移动设备上使用的此用户可排序列表的HTML / JavaScript等价物？

Question

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

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

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;
}

Answer 2

根据您的要求，试试这个.. 在函数selected()中，如果选择了元素，您可以编写关于shpuld发生的代码。

＆＃13;

＆＃13;

function selected(str){
 console.log(str+" is selected.");
 }

＆＃13;

ul {
  position: absolute;
  top: 0;
  width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul a:hover {
  color: red;
  background: none;
}

li a {
  display: block;
  text-decoration: none;
}

li a:hover {
  text-decoration: none;
  color: red;
  background: rgba(255, 255, 255, 0.2);
}

li a:focus {
  text-decoration: none;
}

＆＃13;

<ul style="height:4em; overflow-y:auto;">
  <li><a onclick="selected('1')">One</a></li>
  <li><a onclick="selected('2')">Two</a></li>
  <li><a onclick="selected('3')">Three</a></li>
  <li><a onclick="selected('4')">Four</a></li>
  <li><a onclick="selected('5')">Five</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我建议使用JQuery插件或像Sortable这样的小型Javascript库，支持使用拖动更改订单，甚至可以触摸便携式设备。

示例：http://rubaxa.github.io/Sortable/