Question

我遇到了要移动的表单元素的问题。这是我的简单样本。有两个链接可以向上或向下移动容器。

<div class="unique_a unique_a_1" data-attr="unique_a_1">
  <a href="move('unique_a', 'up', 1)">Up</a>
  <a href="move('unique_a', 'down', 1)">Down</a>
  <input value="aaa">
</div>

<div class="unique_b unique_b_2" data-attr="unique_b_2">
  <a href="move('unique_b', 'up', 2)">Up</a>
  <a href="move('unique_b', 'down', 2)">Down</a>
  <input value="bbb">
</div>

问题发生了，当我点击其中一个字段时，更改输入字段的值并尝试更改我的

function move( div, direction, counter )
{
  if( direction == 'up' ) {
    var field = $("."+ div +"_"+ counter).prev().attr("data-attr");
  } else {
    var field = $("."+ div +"_"+ counter).next().attr("data-attr");
  }

  if( field != undefined )
  {
    // Clicked element
    var current = $("."+ div +"_"+ counter).html();

    // <div> to change position with
    var other = $("."+ field).html();

    // Empty destination <div> and put in code of clicked element
    $("."+ field).empty().prepend(current);

    // Empty clicked element
    $("."+ div +"_"+ counter).empty().append(other);
  }

我遇到了问题，如果我写了＃34; ggg＆＃34;到第一个输入字段并将其向下移动，它会丢失＆＃34; ggg＆＃34;并显示＆＃34; aaa＆＃34;。

如何将文本放入字段然后对元素进行排序并保留我写的文本？

Answer 1

只需移动元素！

此外 - 您使用所有这些唯一标识符拍摄自己，并跟踪它们。你不需要任何这个。例如，当发生单击事件时 - 浏览器会通过设置this的值来告诉您在处理程序中单击了哪个内容。我利用它来获得我们想要移动的div。

分配处理程序一次（作为委托处理程序）允许您动态添加越来越多的“.movable”，而不必担心为每个处理程序单独分配处理程序。

$("body").on("click", ".movable .move-up", function (e) {
  e.preventDefault();
  // get the div that surrounds the button that was clicked
  var thisDiv = $(this).closest(".movable");
  // see if there is a previous div, if so move thisDiv to before it.
  var p = thisDiv.prev('.movable');
  if (p.length > 0) {
    p.before(thisDiv);
  }
});

$("body").on("click", ".movable .move-down", function (e) {
  e.preventDefault();
  var thisDiv = $(this).closest(".movable");
  var n = thisDiv.next('.movable');
  if (n.length > 0) {
    n.after(thisDiv);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='movable'>
  <button class='move-up'>Up</button>
  <button class='move-down'>Down</button>
  <input value="aaa">
</div>

<div class='movable'>
  <button class='move-up'>Up</button>
  <button class='move-down'>Down</button>
  <input value="bbb">
</div>

<div class='movable'>
  <button class='move-up'>Up</button>
  <button class='move-down'>Down</button>
  <input value="ccc">
</div>

<div class='movable'>
  <button class='move-up'>Up</button>
  <button class='move-down'>Down</button>
  <input value="ddd">
</div>

Answer 2

您正在硬编码输入的值。在获取html之前尝试保存值，并在追加/ prepend

之后将其分配回来

jQuery Cut输入字段错过了文本

2 个答案: