Question

我希望能够向上/向下移动div元素，在这种情况下我不能使用jQuery sortable，因为元素需要一次手动移动。

这是我的HTML：

<div>First <a class="up">UP</a> | <a class="down">DOWN</a></div>
<div>Second <a class="up">UP</a> | <a class="down">DOWN</a></div>
<div>Third <a class="up">UP</a> | <a class="down">DOWN</a></div>
<div>Fourth <a class="up">UP</a> | <a class="down">DOWN</a></div>

这里是js：

$(".up,.down").click(function(){
    var row = $(this).parent("div");
    if ($(this).is(".up")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }
});

上述部分工作，排序很好，但是向上，每个顶行都会消失在页面顶部，前面是正文标记。

Answer 1

其实我已经想通了。需要全部将所有元素包装到父容器中

<section>
  <div>First <a class="up">UP</a> | <a class="down">DOWN</a></div>
  <div>Second <a class="up">UP</a> | <a class="down">DOWN</a></div>
  <div>Third <a class="up">UP</a> | <a class="down">DOWN</a></div>
  <div>Fourth <a class="up">UP</a> | <a class="down">DOWN</a></div>
</section>

和javascript：

$(".up").click(function(){
  var $current = $(this).closest('div')
  var $previous = $current.prev('div');
  if($previous.length !== 0){
    $current.insertBefore($previous);
  }
  return false;
});

$(".down").click(function(){
  var $current = $(this).closest('div')
  var $next = $current.next('div');
  if($next.length !== 0){
    $current.insertAfter($next);
  }
  return false;
});

jQuery在行上下移动元素

1 个答案: