Question

What I have currently is a very simple div that has a flexcroll scroll bar. This simple div contains some draggable itmes inside of it. My goal is to be able to drag one of the items and and move it about without the flexcroll scroll bar moving.

As it stands right now if I were to drag one of the items below the viewable area the simple div will scroll down. I would like to prevent this.

I’m using jQuery UI for the draggable items. I’ve already tried using the option “scroll:false” but this does not work for flexcroll.

I’m sorry I don’t have any example code, I’m currently away from my work computer.

flexcroll: http://www.hesido.com/web.php?page=customscrollbar

Answer 1

I don’t know if you have already resolved this problem. This morning, I have the same problem and I found your post. After that, I have googled a lot to find a solution without any lucky. So finally, I decided to do someting myself, I hope my idea will help you.

After read the Programming Guid, I found that in this version (2.0) of flexcroll, we could register a function for onfleXcroll whose description could be found by searching the keyword “Pseudo-event: onfleXcroll”. This is to say that the method will be executed after a scroll is done. So here, what I restore the “top” style with the value before you drag an element.

Here are the code

var $assetswrapper; // This variable indicates the contentwrapper of you div.
var $assetsscrollbar; // This variable indicates the vscroller of you div.
window.onfleXcrollRun = function () { // This method will be executed as soon as the div has been rendered with the help of flexcroll
// You could find these two divs by using firebug, because the top value of these two divs will be changed when we scroll the div which use the class .flexcroll.
$assetswrapper = $('#contentwrapper');
$assetsscrollbar = $('#vscrollerbar');
}

var wrapperTopPosition = 0; // This is used to stock the top value of the wrapperContent before dragging.
var scrollbarTopPosition = 0; // This is used to stock the top value of the scrollbar before dragging.
var dragged; // This is a boolean variable which is used for indicating whether the draggable element has been dragged.
var dropped = false; // This is a boolean variable which used to say whether the draggable element has been dropped.
$('.draggable').draggable({ // you could change .draggable with any element.
start: function (event, ui) {
    // Your code here.

    wrapperTopPosition = $assetswrapper.position().top;
    scrollbarTopPosition = $assetsscrollbar.position().top
    dragged = true;
},
stop: function (event, ui) {
    // Your code here.

    dragged = false;
    dropped = true;
}
});

$('your drag div')[0].onfleXcroll = function () { // This method will be called each time when a scroll has been done.
if (dragged) {
    $assetswrapper.css('top', wrapperTopPosition);
    $assetsscrollbar.css('top', scrollbarTopPosition);
} else {
    // Code here is used for keeping the top position as before even though you have dragged an element out of this div for a long time.
    // You could test the scrollbar without this piece of code, if you drag an element out of the div for a long time, the scrollbar will keep its position, 
    // but after you dropped this element and try to scroll the div, then the scrollbar will reach the end of the div. To solve this problem,
    // I have introduced the method setScrollPos with the old top position plus 72. 72 here is to set the scroll increment for this scroll, I know 
    // this value is not fit for any size of windows, but I don't know how to get the scroll-increment automatically.
    if (dropped) {
        dropped = false;

        $('your drag div')[0].fleXcroll.setScrollPos(false, Math.abs(wrapperTopPosition) + 72);
        $('your drag div')[0].fleXcroll.setScrollPos(false, Math.abs(wrapperTopPosition) + 72);
    }
}
};

I hope this could give you a help if you haven’t found any solution yet.