Question

我只需要让用户使用字段项，因此用户可以更改此字段的顺序，这是第一个和第二个字段。第三＆amp; ....

<div class="f-row instruction">
    <div class="full">
         <input type="text" placeholder="Instructions 1" />
         <input type="text" placeholder="Instructions 2" />
         <input type="text" placeholder="Instructions 3" />
         <input type="text" placeholder="Instructions 4" />
    </div>
    <button class="remove">-</button>
</div>

谢谢＆amp;最诚挚的问候

Answer 1

我发现你有麻烦，所以 -

示例 - 如何使用JqueryUI sortable：

首先，不要忘记包含jquery和jqueryUI（HTML5 - 在页面末尾）：

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

我们有html，我们需要围绕 li 包装输入，我们无法拖动这些输入，因为它们是可点击的，我们不想丢失它们的功能。所以，我们将使用外框：

<div class="f-row instruction">
    <ul class="full">
        <li><input type="text" placeholder="Instructions 1" /></li>
        <li><input type="text" placeholder="Instructions 2" /></li>
        <li><input type="text" placeholder="Instructions 3" /></li>
        <li><input type="text" placeholder="Instructions 4" /></li>
     </ul>
    <button class="remove">-</button>
</div>

和我们的JS：

  <script>
    $(function() {
      $( ".full" ).sortable();
      $( ".full" ).disableSelection();
    });
  </script>

就是这样，我并不是很复杂。工作示例 -

http://jsfiddle.net/1Lvc5hwf/2/

排序输入联系人字段

1 个答案: