Geek Answers Handbook

Jquery sortable infinitive scroll

I have a problem with sorting jquery with a scroll. An example is available - http://jsfiddle.net/n5eL2e55/1/

My code: HTML:

<ul class="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
    <li class="item">item 4</li>
    <li class="item">item 5</li>  
    <li class="item">item 6</li>
    <li class="item">item 7</li>    
</ul>

JavaScript:

$(function() {
    $(".list").sortable({
        items: ".item",
        axis : "y",
        helper:'clone',
        containment: "parent",
        scroll: true
    }).disableSelection();
    $(".list").disableSelection();
});

CSS

.list{
    overflow: scroll;
    border:1px solid red;
    height: 200px;
    width: 150px;
    position: relative;
    padding: 0;
}
.item{
    height: 50px;
    width: 100%;
    list-style-type: none;
    border: 1px solid #000;
}

The problem is dragging the item from top to bottom on the last item, and you continue to scroll from the bottom. The problem is that jquery sorting allows you to scroll to the bottom without restrictions (the scroll area continues to grow) Image is available at - http://i.stack.imgur.com/Ljd04.png

+4
source share
3 answers

You can intervene in scrollTopfrom scrollParentin an event sortso that it does not exceed scrollParent height. The result is not perfect, but there is probably a way to improve it.

Like this:

sort: function (e, ui) {
            var scrollParent = $(e.target).sortable('instance').scrollParent;
            if( scrollParent.scrollTop()>scrollParent.height()){
               scrollParent.scrollTop(scrollParent.height())
            }

        }

: http://jsfiddle.net/zt2sd3kv/1/

,

callculation scrollTop , scrollTop - http://jsfiddle.net/n5eL2e55/2/

$(".list").sortable({
    items: ".item",
    axis : "y",
    helper:'clone',
    containment: "parent",
    scroll: true,
    start: function(e, ui) {
        //set max scrollTop for sortable scrolling
        var scrollParent = $(this).data("ui-sortable").scrollParent;
        var maxScrollTop = scrollParent[0].scrollHeight - scrollParent.height() - ui.helper.height();
        $(this).data('maxScrollTop', maxScrollTop);
    },
    sort: function (e, ui) {
        //check if scrolling is out of boundaries
        var scrollParent = $(this).data("ui-sortable").scrollParent,
            maxScrollTop = $(this).data('maxScrollTop');
        if(scrollParent.scrollTop() > maxScrollTop){
            scrollParent.scrollTop(maxScrollTop);
        }
    },
}).disableSelection();
+5

u . .

http://jsfiddle.net/omegak/2bHSG/

$(".sortable").sortable({
    axis: "y",
    containment: "parent",
    cursor: "move",
    items: "li",
    tolerance: "pointer",
});
ul {
    border: 1px solid gray;
    list-style: none;
    padding: 0;
    display: inline-block;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 190px;
    border: 1px solid black;
    float: left;
    margin: 5px;
}
li {
    background: white;
    border: 1px solid gray;
    height: 50px;
}
0

Improving the solution from Julien Gregoire and spacemanCoder .

I needed a way to prevent horizontal scrolling in a flexbox container without axis limitation y.

I basically only added the following code to the event handler sort

if (scrollParentEl.scrollLeft()) {
    scrollParentEl.scrollLeft(0);
}

http://jsfiddle.net/n5eL2e55/5/

0
source

More articles:


All Articles