Question

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

现在，如果我要拖动可视区域下面的一个项目，那么简单的div将向下滚动。我想阻止这一点。

我使用jQuery UI进行可拖动项目。我已经尝试过使用选项＆＃34;滚动：false＆＃34;但这对flexcroll不起作用。

抱歉，我没有任何示例代码，我目前远离工作计算机。

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

Answer 1

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

在阅读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);
    }
}
};

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

防止事件的flexcroll

1 个答案: