防止元素在jquery中向上移动DOM太远

Question

我正在尝试编写一个表单，用户可以在其中上下移动项目以重新排序输入。这些项目来自一个 symfony 集合，这里无法展示，但基本概念如下所示。

我从Move containing elements up and down with jquery 获取了 js。它上下移动它们，但理想情况下我想：

1. 防止顶部项目进一步超出顶部或底部文本。
2. 隐藏顶部项目的向上箭头和底部项目的向下箭头（我猜这样做实际上可以解决 1？）。

我对 js 还很陌生，不太了解解决方案。

提前感谢您的帮助 - 如果我能让事情变得更清楚，请告诉我。我在这里有一个工作 jsfiddle jsfiddle

$('.js-up').click(function() {
  $(this).parents('div.js-item').insertBefore($(this).parents('div.js-item').prev());
});

$('.js-down').click(function() {
  $(this).parents('div.js-item').insertAfter($(this).parents('div.js-item').next());
});

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
  Can't go above here
</div>
<div class="js-item form-row">
  1. Moveable text
  <div class="col-sm-1">
    <a href="#" class="js-up btn btn-primary float-right" title="up"><i class="fas fa-arrow-up"></i></a>
  </div>
  <div class="col-sm-1">
    <a href="#" class="js-down btn btn-primary float-right" title="down"><i class="fas fa-arrow-down"></i></a>
  </div>
</div>
<div class="js-item form-row">
  2. Moveable text
  <div class="col-sm-1">
    <a href="#" class="js-up btn btn-primary float-right" title="up"><i class="fas fa-arrow-up"></i></a>
  </div>
  <div class="col-sm-1">
    <a href="#" class="js-down btn btn-primary float-right" title="down"><i class="fas fa-arrow-down"></i></a>
  </div>
</div>
<div class="js-item form-row">
  3. Moveable text
  <div class="col-sm-1">
    <a href="#" class="js-up btn btn-primary float-right" title="up"><i class="fas fa-arrow-up"></i></a>
  </div>
  <div class="col-sm-1">
    <a href="#" class="js-down btn btn-primary float-right" title="down"><i class="fas fa-arrow-down"></i></a>
  </div>
</div>

<div class="bottom">
  Can't go below here
</div>

Answer 1

只需将父选择器添加到prev() 和next()。如果 prev/next 元素与该选择器不匹配，则不会移动。

function itemMoved () {
  $('.first-item, .last-item').removeClass('first-item last-item');
  $('div.js-item')
    .first().addClass('first-item').end()
    .last().addClass('last-item');
}

$('.js-up').click(function() {
  $(this).parents('div.js-item').insertBefore($(this).parents('div.js-item').prev('div.js-item'));
  itemMoved();
});

$('.js-down').click(function() {
  $(this).parents('div.js-item').insertAfter($(this).parents('div.js-item').next('div.js-item'));
  itemMoved();
});

itemMoved();

.first-item .fa-arrow-up, .last-item .fa-arrow-down {
  display: none;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
  Can't go above here
</div>
<div class="js-item form-row">
  1. Moveable text
  <div class="col-sm-1">
    <a href="#" class="js-up btn btn-primary float-right" title="up"><i class="fas fa-arrow-up"></i></a>
  </div>
  <div class="col-sm-1">
    <a href="#" class="js-down btn btn-primary float-right" title="down"><i class="fas fa-arrow-down"></i></a>
  </div>
</div>
<div class="js-item form-row">
  2. Moveable text
  <div class="col-sm-1">
    <a href="#" class="js-up btn btn-primary float-right" title="up"><i class="fas fa-arrow-up"></i></a>
  </div>
  <div class="col-sm-1">
    <a href="#" class="js-down btn btn-primary float-right" title="down"><i class="fas fa-arrow-down"></i></a>
  </div>
</div>
<div class="js-item form-row">
  3. Moveable text
  <div class="col-sm-1">
    <a href="#" class="js-up btn btn-primary float-right" title="up"><i class="fas fa-arrow-up"></i></a>
  </div>
  <div class="col-sm-1">
    <a href="#" class="js-down btn btn-primary float-right" title="down"><i class="fas fa-arrow-down"></i></a>
  </div>
</div>

<div class="bottom">
  Can't go below here
</div>