上下移动元素时始终保持可见 [英] keep element always visible while moving it up and down

问题描述

我试图在上下移动titleact时始终保持可见，但有时它会超出父级的边界.

I'm trying to keep titleact always visible while moving it up and down, but sometimes it goes outside of parent's borders.

我不想每次单击按钮时都滚动父级，但仅当titleact位于顶部/底部边框附近时.

I don't want to scroll parent each time a button is clicked but only if titleact is near to the top/bottom border.

有帮助吗?

$('.title').on('click', function() {
  $('.titleact').removeClass('titleact');
  $(this).addClass('titleact');
});

$('.btnup').click(function() {
  let obj = $('.titleact');
  let i = obj.index('.title');
  if (i == 0) {
    return;
  }
  let targ = $('.title').eq(i - 1);
  obj.insertBefore(targ);

  let parent = obj.parent();
  if (obj.offset().top <= parent.offset().top) {
    parent.animate({
      scrollTop: parent.scrollTop() - parent.height() - obj.position().top
    });
  }
});

$('.btndown').click(function() {
  let obj = $('.titleact');
  let i = obj.index('.title');
  let count = $('.title').length;
  if (i == count - 1) {
    return;
  }
  let targ = $('.title').eq(i + 1);
  obj.insertAfter(targ);

  let parent = obj.parent();
  let h1 = obj.outerHeight(true);
  if (obj.offset().top + h1 >= parent.offset().top + parent.height()) {
    parent.animate({
      scrollTop: parent.scrollTop() + parent.height() - h1
    });
  }
});

.parent {
  border: 2px solid lightseagreen;
  height: 120px;
  overflow-y: scroll;
}

.title {
  padding: 2px 0;
  margin: 3px 0;
  cursor: pointer;
}

.titleact {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent' id='parent'>
  <div class='title titleact'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
  <div class='title'>lorem ipsum</div>
</div>
<br>
<button class='btnup'>UP</button>
<button class='btndown'>DOWN</button>

推荐答案

我采用了原始脚本并进行了一些更改，我认为这些更改可以做您想要的.注意事项:

I took your original script and made some changes that I think do what you want. A few things to note:

• 在某些情况下，移动元素似乎会影响滚动，因此我让它在移动元素后立即恢复了原始的scrollTop.
• 通过找到titleact元素与列表中第一个元素之间的位置差来计算新的滚动位置.

$('.title').on('click', function() {
  $('.titleact').removeClass('titleact');
  $(this).addClass('titleact');
});

$('.btnup').click(function() {
  let obj = $('.titleact');
  let i = obj.index('.title');
  if (i == 0) {
    return;
  }
  let parent = obj.parent();
  let origScrollTop = parent.scrollTop();
  let targ = $('.title').eq(i - 1);
  targ.before(obj)
  parent.scrollTop(origScrollTop);

  if (obj.offset().top < parent.offset().top) {
    let first = parent.find(":first");
    parent.animate({
      scrollTop: obj.position().top - first.position().top - parent.height() + obj.outerHeight(true)
    });
  }
});

$('.btndown').click(function() {
  let obj = $('.titleact');
  let i = obj.index('.title');
  let count = $('.title').length;
  if (i == count - 1) {
    return;
  }
  let parent = obj.parent();
  let origScrollTop = parent.scrollTop();
  let targ = $('.title').eq(i + 1);
  targ.after(obj)
  parent.scrollTop(origScrollTop);

  if (obj.offset().top + obj.outerHeight(true) > parent.offset().top + parent.height()) {
    let first = parent.find(":first");
    parent.animate({
      scrollTop: obj.position().top - first.position().top
    });
  }
});

.parent {
  border: 2px solid lightseagreen;
  height: 120px;
  overflow-y: scroll;
}

.title {
  padding: 2px 0;
  margin: 3px 0;
  cursor: pointer;
}

.titleact {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent' id='parent'>
  <div class='title titleact'>lorem ipsum 1</div>
  <div class='title'>lorem ipsum 2</div>
  <div class='title'>lorem ipsum 3</div>
  <div class='title'>lorem ipsum 4</div>
  <div class='title'>lorem ipsum 5</div>
  <div class='title'>lorem ipsum 6</div>
  <div class='title'>lorem ipsum 7</div>
  <div class='title'>lorem ipsum 8</div>
  <div class='title'>lorem ipsum 9</div>
  <div class='title'>lorem ipsum 10</div>
  <div class='title'>lorem ipsum 11</div>
  <div class='title'>lorem ipsum 12</div>
  <div class='title'>lorem ipsum 13</div>
  <div class='title'>lorem ipsum 14</div>
  <div class='title'>lorem ipsum 15</div>
</div>
<br>
<button class='btnup'>UP</button>
<button class='btndown'>DOWN</button>

这篇关于上下移动元素时始终保持可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！