1

私が現在持っているのは、flexcroll スクロール バーを持つ非常に単純な div です。この単純な div には、ドラッグ可能なアイテムがいくつか含まれています。私の目標は、項目の 1 つをドラッグして、flexcroll スクロール バーを動かさずに移動できるようにすることです。

現在のところ、アイテムの 1 つを表示可能領域の下にドラッグすると、単純な div が下にスクロールします。これを防ぎたいと思います。

ドラッグ可能なアイテムに jQuery UI を使用しています。オプション「scroll:false」を使用してみましたが、flexcroll では機能しません。

申し訳ありませんが、サンプル コードはありません。現在、職場のコンピューターから離れています。

フレックススクロール: http://www.hesido.com/web.php?page=customscrollbar

4

1 に答える 1

1

この問題をすでに解決しているかどうかはわかりません。今朝、私は同じ問題を抱えていて、あなたの投稿を見つけました。その後、私は幸運なことに解決策を見つけるために多くのことをグーグルで調べました。最後に、自分で何かをすることにしました。私のアイデアがお役に立てば幸いです。

Programming Guidを読んだ後、このバージョン (2.0) の flexcroll では、キーワード「Pseudo-event: onfleXcroll」を検索することで説明を見つけることができる 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 に答える