jquery - 如何在Jquery Sortable Plugin上实现自动垂直滚动？

Question

我正在使用 Jquery-Sortable plugin就像在这里构建我的菜单项目一样，只需将 wordpress menubuilder 拖放即可。

包含所有菜单项的容器高度是固定的，因此当菜单项数量超过容器高度时，很难将顶部项目拖到容器底部。

$(function() {
  $("ol.default").sortable({
    group: 'item'
  });
})

body.dragging,
body.dragging * {
  cursor: move !important;
}

.overflow {
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 20px;
}

.dragged {
  position: absolute;
  top: 0;
  opacity: 0.5;
  z-index: 2000;
}


/* line 10, jquery-sortable.css.sass */

ol.vertical {
  margin: 0 0 9px 0;
}


/* line 12, jquery-sortable.css.sass */

ol.vertical li {
  display: block;
  margin: 5px;
  padding: 5px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
}

ol.vertical li.placeholder {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
}

ol.vertical li.placeholder:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: -5px;
  left: -5px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: red;
  border-right: none;
}

ol {
  list-style-type: none;
}

ol i.icon-move {
  cursor: pointer;
}

ol li.highlight {
  background: #333333;
  color: #999999;
}

ol li.highlight i.icon-move {
  background-image: url("../img/glyphicons-halflings-white.png");
}

ol.nested_with_switch,
ol.nested_with_switch ol {
  border: 1px solid #eeeeee;
}

ol.nested_with_switch.active,
ol.nested_with_switch ol.active {
  border: 1px solid #333333;
}

ol.nested_with_switch li,
ol.simple_with_animation li,
ol.default li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script>


<div class="overflow">
  <ol class="default vertical">
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
    <li>elem4</li>
    <li>elem5</li>
    <li>elem6</li>
    <li>elem7</li>
    <li>elem8</li>
    <li>elem9</li>
    <li>elem10</li>
  </ol>
</div>

<div class="overflow">
  <ol class="default vertical">
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
    <li>elem4</li>
    <li>elem5</li>
    <li>elem6</li>
    <li>elem7</li>
    <li>elem8</li>
    <li>elem9</li>
    <li>elem10</li>
  </ol>
</div>

我尝试搜索自动滚动解决方案，但似乎没有太多提到这个问题，而插件 github 提到 this issue但似乎它对我的情况不起作用。

我该如何解决这个问题？请帮忙。谢谢

Answer 1

您需要使用正确版本的 jQuery UI，请尝试下面的代码片段

$("ol.default").sortable({
  onDrag: (item, position, sup, event) => {
    const container = $(item).parents('.overflow');
    const containerTop = container.offset().top;
    const containerBottom = containerTop + container.height();

    if (event.pageY > containerBottom) {
      container.scrollTop(container.scrollTop() + 10);
    } else if (event.pageY < containerTop) {
      container.scrollTop(container.scrollTop() - 10);
    }
  }
})

body.dragging,
body.dragging * {
  cursor: move !important;
}

.overflow {
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 20px;
}

.dragged {
  position: absolute;
  top: 0;
  opacity: 0.5;
  z-index: 2000;
}


/* line 10, jquery-sortable.css.sass */

ol.vertical {
  margin: 0 0 9px 0;
}


/* line 12, jquery-sortable.css.sass */

ol.vertical li {
  display: block;
  margin: 5px;
  padding: 5px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
}

ol.vertical li.placeholder {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
}

ol.vertical li.placeholder:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: -5px;
  left: -5px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: red;
  border-right: none;
}

ol {
  list-style-type: none;
}

ol i.icon-move {
  cursor: pointer;
}

ol li.highlight {
  background: #333333;
  color: #999999;
}

ol li.highlight i.icon-move {
  background-image: url("../img/glyphicons-halflings-white.png");
}

ol.nested_with_switch,
ol.nested_with_switch ol {
  border: 1px solid #eeeeee;
}

ol.nested_with_switch.active,
ol.nested_with_switch ol.active {
  border: 1px solid #333333;
}

ol.nested_with_switch li,
ol.simple_with_animation li,
ol.default li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script>


<div class="overflow">
  <ol class="default vertical">
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
    <li>elem4</li>
    <li>elem5</li>
    <li>elem6</li>
    <li>elem7</li>
    <li>elem8</li>
    <li>elem9</li>
    <li>elem10</li>
  </ol>
</div>

<div class="overflow">
  <ol class="default vertical">
    <li>elem1</li>
    <li>elem2</li>
    <li>elem3</li>
    <li>elem4</li>
    <li>elem5</li>
    <li>elem6</li>
    <li>elem7</li>
    <li>elem8</li>
    <li>elem9</li>
    <li>elem10</li>
  </ol>
</div>