How to drag elements using dragSort inside a scroll div?

Question

I need the elements to be dragged only inside a div that has scroll. For example:

HTML

<ul id="list1">
    <li><div>1</div></li>
    <li><div>2</div></li>
    <li><div>3</div></li>
    <li><div>4</div></li>
    <li><div>5</div></li>
    <li><div>6</div></li>
    <li><div>7</div></li>
    <li><div>8</div></li>
    <li><div>9</div></li>
</ul>

CSS

h1 { font-size:16pt; }
h2 { font-size:13pt; }
ul { margin:0px; padding:0px; margin-left:20px; overflow: auto}
#list1 { list-style-type:none; margin:0px; white-space: nowrap; width: 100%;}
#list1 li{padding:5px; width:100px; height:100px; display: inline-block;}
#list1 div{ width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }

JS

$("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

function saveOrder() {
    var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
    $("input[name=list1SortOrder]").val(data.join("|"));
};

Jsfiddle

Drag the first one there to the last position, with the scroll of the div accompanying.

How to do?

Answer 1

Here is a suggestion:

http://jsfiddle.net/Lq8fb/

$("#list1, #list2").dragsort({
    dragSelector: "div",
    dragBetween: true,
    dragEnd: saveOrder,
    placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
});

var onDrag = false; // criar uma flag para saber se o Drag está ativo 
                    // o MooTools tem esta flag nativa mas não encontrei no jQuery...

var $list = $("#list1"); // só para economizar
var dimensoesList = {    // aqui guardo a posicao e largura da DIV mãe
    posicao: $list.position().left,
    largura: $list.width()
};

function mousePressed(e) {
    onDrag = e.type == 'mousedown' ? true : false;;
}
$('#list1 li').on('mousedown', mousePressed);
$('#list1 li').on('mouseup', mousePressed); // tb para mudar a flag quando o mouse for pressado

$('#list1 li').mousemove(function (e) {
    if (!onDrag) return; // se não estiver em drag, abortar
    var posicaoMouse = e.clientX; // guardar a posição atual do mouse
    if (posicaoMouse < dimensoesList.posicao + 100) { // caso esteja à esquerda
        $list.stop().animate({
            scrollLeft: dimensoesList.posicao
        }, 200);
    }
    // estes dois animate deviam estar numa função à parte que recebe o valor do scroll
    // e eventualmente o elemento, se tiver mais listas... fica para você fazer :)
    if (posicaoMouse > dimensoesList.largura - 100) { // caso esteja à direita
        $list.stop().animate({
            scrollLeft: dimensoesList.largura
        }, 200);
    }
});

function saveOrder() {

    var data = $("#list1 li").map(function () {
        return $(this).children().html();
    }).get();
    $("input[name=list1SortOrder]").val(data.join("|"));
};

Answer 2

It’s just add the parameter scrollContainer:

$("#list1, #list2").dragsort({ 
    scrollContainer: "#list1", 
    dragSelector: "div", 
    dragBetween: true, 
    dragEnd: saveOrder, 
    placeHolderTemplate: "<li class='placeHolder'><div></div></li>" 
});