Question

我正在尝试编写一个表格，用户可以在其中上下移动项目以重新排序输入。这些项目来自一个symfony集合，这里太多了，但下面显示了基本思想。

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

防止顶部项目进一步超出顶部或底部文本。
隐藏最上面的项的向上箭头和最下面的项的向下箭头（我想这样做实际上可以解决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>

防止元素在jQuery中向上移动DOM

1 个答案: