#StackBounty: #jquery #sortables How to implement auto scroll vertically on Jquery Sortable Plugin?

Bounty: 100

I’m using Jquery-Sortable plugin as in here to build my menu project drap & drop just wordpress menubuilder.

Container height containing all menu items is fixed so that as the number of menu items exceed the container height, it is hard to drag the top item one to the bottom of container.

$(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;
}
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

https://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js


  1. elem1
  2. elem2
  3. elem3
  4. elem4
  5. elem5
  6. elem6
  7. elem7
  8. elem8
  9. elem9
  10. elem10
  1. elem1
  2. elem2
  3. elem3
  4. elem4
  5. elem5
  6. elem6
  7. elem7
  8. elem8
  9. elem9
  10. elem10

I tried to search around for auto scroll solution but seem there was not much mentioned about this issue, while plugin github mentioned this issue but seemed it did not work for my case.

How could I fixed this? Please kindly help. Thanks


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.