JQuery slim scroll with jquery ui sortable issue

Question

Привет У меня ситуация, когда я использую jQuery плагин slim scroll с jquery sortable. Проблема в том, что когда я перетаскиваю элементы из одного элемента списка в другой, полоса прокрутки справа не перемещается вместе. Поэтому, если мне нужно отбросить список до последней области элементов списка, я не могу туда попасть, если не использовать mousewheel. Так как я могу связать позицию прокрутки, когда я перетаскиваю элемент из одной области списка в другой. Ниже код-

$(function() { 
 
    $("ul.droptrue").sortable({ 
 

 
    revert: 'invalid', 
 
    connectWith: "ul" 
 
    }); 
 

 

 
    $("#sortable1, #sortable2, #sortable3").disableSelection(); 
 

 

 
    $('.ScrollableAreanew ').slimScroll({ 
 
    height: '400', 
 
    width: '100%', 
 
    alwaysVisible: true, 
 
    color: 'rgb(15,170,255)', 
 
    railOpacity: 1, 
 
    opacity: 1, 
 
    size: '5px', 
 
    position: 'right', 
 
    allowPageScroll: false, 
 

 

 
    }); 
 
});

#sortable1, 
 
#sortable2, 
 
#sortable3 { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    float: left; 
 
    margin-right: 10px; 
 
    background: #eee; 
 
    padding: 5px; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
} 
 
#sortable1 li, 
 
#sortable2 li, 
 
#sortable3 li { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    width: 100%; 
 
    border: 1px solid #000; 
 
    margin-bottom: 5px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script> 
 
<div class="ScrollableAreanew"> 
 
    <ul id="sortable1" class="droptrue"> 
 
    <li class="ui-state-default">Can be dropped..</li> 
 
    <li class="ui-state-default">..on an empty list</li> 
 
    <li class="ui-state-default">Item 3</li> 
 
    <li class="ui-state-default">Item 4</li> 
 
    <li class="ui-state-default">Item 5</li> 
 
    </ul> 
 
    <ul id="sortable2" class="droptrue"> 
 
    <li class="ui-state-highlight">Cannot be dropped..</li> 
 
    <li class="ui-state-highlight">..on an empty list</li> 
 
    <li class="ui-state-highlight">Item 3</li> 
 
    <li class="ui-state-highlight">Item 4</li> 
 
    <li class="ui-state-highlight">Item 5</li> 
 
    </ul> 
 
    <ul id="sortable3" class="droptrue"> 
 
    <li class="ui-state-highlight">Cannot be dropped..</li> 
 
    <li class="ui-state-highlight">..on an empty list</li> 
 
    <li class="ui-state-highlight">Item 3</li> 
 
    <li class="ui-state-highlight">Item 4</li> 
 
    <li class="ui-state-highlight">Item 5</li> 
 
    </ul> 
 
</div>

Answer 1

Вот что нам нужно сделать, это

1. Получить позицию мыши - Y координат, мы перемещаем внутри .ScrollableAreanew
2. Всякий раз, когда сортировкой элемент перемещается (используйте событие sort), переместите slimScroll в прокрученную позицию, используя scrollTo.

sort Событие запускается во время сортировки. См here для более подробной информации

$(function() { 
 
    var currentMousePos = { x: -1, y: -1 }; 
 
    $(document).mousemove(function(event) { 
 
     currentMousePos.x = event.pageX; 
 
     currentMousePos.y = event.pageY; // Get position of mouse - Y coordinate 
 
    }); 
 
    
 
    $("ul.droptrue").sortable({ 
 
    sort : function(event, ui) { // This event is triggered during sorting. 
 
    var scrollTo_int = currentMousePos.y + 'px'; 
 
    $(".ScrollableAreanew").slimScroll({ 
 
    scrollTo : scrollTo_int, // scroll to mouse position 
 
    height: '400', 
 
    width: '100%', 
 
    alwaysVisible: true, 
 
    color: 'rgb(15,170,255)', 
 
    railOpacity: 1, 
 
    opacity: 1, 
 
    size: '5px', 
 
    position: 'right', 
 
    allowPageScroll: false 
 
    }); 
 
    }, 
 
    revert: 'invalid', 
 
    connectWith: "ul" 
 
    }); 
 

 
    $("#sortable1, #sortable2, #sortable3").disableSelection(); 
 

 
    $('.ScrollableAreanew ').slimScroll({ 
 
    height: '400', 
 
    width: '100%', 
 
    alwaysVisible: true, 
 
    color: 'rgb(15,170,255)', 
 
    railOpacity: 1, 
 
    opacity: 1, 
 
    size: '5px', 
 
    position: 'right', 
 
    allowPageScroll: false 
 
    }); 
 
});

#sortable1, 
 
#sortable2, 
 
#sortable3 { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    float: left; 
 
    margin-right: 10px; 
 
    background: #eee; 
 
    padding: 5px; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
} 
 
#sortable1 li, 
 
#sortable2 li, 
 
#sortable3 li { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    font-size: 1.2em; 
 
    width: 100%; 
 
    border: 1px solid #000; 
 
    margin-bottom: 5px; 
 
} 
 

 
.justAddingHeight 
 
{ 
 
    height:100px !important; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script> 
 
<div class="justAddingHeight"></div> 
 
<div class="ScrollableAreanew"> 
 
    <ul id="sortable1" class="droptrue droppable"> 
 
    <li class="ui-state-default draggable">Can be dropped..</li> 
 
    <li class="ui-state-default draggable">..on an empty list</li> 
 
    <li class="ui-state-default draggable">Item 3</li> 
 
    <li class="ui-state-default draggable">Item 4</li> 
 
    <li class="ui-state-default draggable">Item 5</li> 
 
    </ul> 
 
    <ul id="sortable2" class="droptrue droppable"> 
 
    <li class="ui-state-highlight draggable">Cannot be dropped..</li> 
 
    <li class="ui-state-highlight draggable">..on an empty list</li> 
 
    <li class="ui-state-highlight draggable">Item 3</li> 
 
    <li class="ui-state-highlight draggable">Item 4</li> 
 
    <li class="ui-state-highlight draggable">Item 5</li> 
 
    </ul> 
 
    <ul id="sortable3" class="droptrue droppable"> 
 
    <li class="ui-state-highlight draggable">Cannot be dropped..</li> 
 
    <li class="ui-state-highlight draggable">..on an empty list</li> 
 
    <li class="ui-state-highlight draggable">Item 3</li> 
 
    <li class="ui-state-highlight draggable">Item 4</li> 
 
    <li class="ui-state-highlight draggable">Item 5</li> 
 
    </ul> 
 
</div>

EDIT

1. Вместо того, чтобы положение мыши внутри .ScrollableAreanew DIV, получить позицию мыши в document.

Примечание: Добавлено DIV с классом justAddingHeight (имеющий высоту 100px) в качестве ОНК.

Надеюсь, это решает вашу проблему.