0

ページでドラッグアンドスクロールを使用しています。これは、mousedown、mousemove、mouseupの3つの単純なハンドラーで動作します。

今私は2つの問題があります：

  1. divがマウスでスクロールしているため、カーソルが同じオブジェクト上にとどまり、イベントが発生するため、すべてのmyイベント.on('click'と.click(イベントが壊れています。mousedownとmouseupの間のmousemoveの距離が固定値未満の場合にのみ起動するように、ハンドラーを変更するにはどうすればよいですか？それも可能ですか、それとも独自のコードを作成してすべてのコードを変更する必要がありますか？---解決済み---
  2. event.preventDefault();このドラッグ＆スクロール中に、選択を防ぐために使用しています。これにより、ユーザーはフォームフィールドをクリックできなくなります。これを修正する簡単な方法はありますか、それとも別の方法で選択を停止する必要がありますか？---回避策で解決---

どんなアイデアも役に立ちます。

スクロール用の3つのハンドラーは次のとおりです。

    mouseDownHandler : function(event) {

        if (!$(event.target).closest('.stopscroll').length) {

            event.data.lastCoord = {left: event.clientX, top: event.clientY}; 

            $.event.add( document, "mouseup", dragscroll.mouseUpHandler, event.data );
            $.event.add( document, "mousemove", dragscroll.mouseMoveHandler, event.data );

            $('body').addClass('dragcursor'); //// Add Move Cursor

            if (!$(event.target).closest('.noformelement').length) {
                event.preventDefault();
                return false;
            }
        }

    },

    mouseMoveHandler : function(event) { 
        var delta = {left: (event.clientX - event.data.lastCoord.left), top: (event.clientY - event.data.lastCoord.top)};

        event.data.scrollable.scrollLeft(event.data.scrollable.scrollLeft() - delta.left);

        $('.th-header').css('margin-left', -event.data.scrollable.scrollLeft()); //// Scrollsync with header

        event.data.scrollable.scrollTop(event.data.scrollable.scrollTop() - delta.top);

        event.data.lastCoord={left: event.clientX, top: event.clientY}

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }

    },

    mouseUpHandler : function(event) {
        $.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
        $.event.remove( document, "mouseup", dragscroll.mouseUpHandler);

        $('body').removeClass('dragcursor');

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }
    }

更新/バンプ：すべてのクリックイベントを一度に無効にするだけで、私が推測する問題はすでに解決されています。試し$(document).on('click', '*', function() {return false;});ましたが動作しません...

4

1 に答える 1

0

で解決

mouseDownHandler : function(event) {

    if (!$(event.target).closest('.stopscroll').length) {

        event.data.lastCoord = {left: event.clientX, top: event.clientY}; 
        event.data.startCoord = {left: event.clientX, top: event.clientY};
        event.data.allowClick = true;
        $('*').off('click.stop');

        $.event.add( document, "mouseup", dragscroll.mouseUpHandler, event.data );
        $.event.add( document, "mousemove", dragscroll.mouseMoveHandler, event.data );

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }
    }

},

mouseMoveHandler : function(event) { 
    var delta = {left: (event.clientX - event.data.lastCoord.left), top: (event.clientY - event.data.lastCoord.top)};
    var range = {left: (event.clientX - event.data.startCoord.left), top: (event.clientY - event.data.startCoord.top)};
    if (event.data.allowClick && (Math.abs(range.left)>=5 || Math.abs(range.top)>=5)) {
        event.data.allowClick = false;
        $('*').on('click.stop', function() {return false;});
        $('body').addClass('dragcursor'); //// Add Move Cursor
    }

    event.data.scrollable.scrollLeft(event.data.scrollable.scrollLeft() - delta.left);

    $('.th-header').css('margin-left', -event.data.scrollable.scrollLeft()); //// Scrollsync with header

    event.data.scrollable.scrollTop(event.data.scrollable.scrollTop() - delta.top);

    event.data.lastCoord={left: event.clientX, top: event.clientY}

    if (!$(event.target).closest('.noformelement').length) {
        event.preventDefault();
        return false;
    }

}
于 2012-05-31T18:38:55.260 に答える