1

我目前拥有的是一个非常简单的 div，它有一个 flexcroll 滚动条。这个简单的 div 在其中包含一些可拖动的项目。我的目标是能够拖动其中一个项目并在不移动 flexcroll 滚动条的情况下移动它。

就目前而言，如果我要拖动可视区域下方的项目之一，简单的 div 将向下滚动。我想防止这种情况。

我将 jQuery UI 用于可拖动项目。我已经尝试过使用“scroll:false”选项，但这不适用于 flexcroll。

对不起，我没有任何示例代码，我目前不在我的工作电脑旁。

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

4

1 回答 1

1

我不知道你是否已经解决了这个问题。今天早上，我有同样的问题，我找到了你的帖子。在那之后，我在谷歌上搜索了很多以找到解决方案，但没有任何运气。所以最后，我决定自己做一些事情，希望我的想法对你有帮助。

看了Programming Guid后发现，在这个版本（2.0）的flexcroll中，我们可以为onfleXcroll注册一个函数，可以通过搜索关键字“Pseudo-event: onfleXcroll”找到其描述。也就是说，该方法将在滚动完成后执行。所以在这里，我在拖动元素之前使用值恢复“顶部”样式。

这是代码

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);
    }
}
};

如果您还没有找到任何解决方案，我希望这可以为您提供帮助。

于 2012-08-29T13:06:24.220 回答