【JQuery】製作Sortable下拉時ScrollBar也會跟著捲動

JQuery Sortable套件

這個常常被我用來設定排序的套件，但有個缺點就是它在拉動時父容器不會跟著滾動ScrollBar，所以自己稍做修改了一下(包含上下按鈕的功能)

• 先看一下成果
• HTML ```html
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

*   CSS ```css
#sortable { list-style-type: none; margin: 0; padding: 0; width: 150px; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }

    #sortable
{
    border:1px dotted gray;
    overflow:auto;
    height:500px;
    display:inline-block;
    width:130px;
}
#sortbtn
{
    display:inline-block;
    width:30px;
    vertical-align:top;
    position:relative;
    top:180px;
}

• JavaScript ```javascript
  $(function () {
  var is_dragging = false;
  $(‘#sortable’).disableSelection().sortable({

    placeholder: "ui-state-highlight",
    axis: 'y',
    start: function (event, ui) { is_dragging = true; itemSelect(ui.item); },
    stop: function (event, ui) { is_dragging = false;}
  

  }).mousemove(function (e) {

    if (is_dragging) {
        $('#sortable').scrollTop(function (i, v) {
            var h = $('#sortable').height();
            var y = e.clientY - h / 2;
            return v + y * 0.05;
        });
    }
  

  });

    //=== 點擊Item時
  

  $(‘#sortable > li’).click(function (event) {

    itemSelect(this);
  

  });

    ////=== 上下按鈕
  

  $(‘#btnUp,#btnDown’).click(function () {

    var Container_height = $('#sortable').height();
    var position_top = $('#sortable').position().top;
  
        if (lastSelect != null) {
        if ($(this).prop('id') == "btnUp") {
            lastSelect.prev().before(lastSelect);
            //卷軸向上滾動
            $('#sortable').scrollTop(function (i, v) {
                if (lastSelect.position().top <= position_top + Container_height / 2) {
                    return v - lastSelect.height();
                }
            });
        }
        else {
            lastSelect.next().after(lastSelect);
            //卷軸向下滾動
            $('#sortable').scrollTop(function (i, v) {
                if (lastSelect.position().top >= position_top + Container_height / 2) {
                    return v + lastSelect.height();
                }
            });
        }
    }
  

  });
  });