10

マウスの左ボタンと右ボタンの両方に関数がバインドされているページがあります。マウスの左ボタンでドラッグ/ソート可能、マウスの右ボタンでカスタム コンテキスト メニュー。

私がしたいのは、コンテキストメニューがマウスの左ボタンのクリックで機能し、JQuery UI Draggable/Sortable がマウスの右ボタンのクリックで機能するように機能を切り替えることです。

助けてくれてありがとう。

PS: カスタム コンテキスト メニューをマウスの左ボタンで動作させることができます。したがって、JQuery UI Draggable/Sortable のみのヘルプが必要です。ありがとう。

4

4 に答える 4

11

jQuery UI コードをハッキングしないと、実際には不可能です。

最終ユーザーを混乱させる可能性があるため、この動作を使用する理由はわかりませんが、考えられる解決策は次のとおりです。

この jQuery UI チケットhttp://bugs.jqueryui.com/ticket/6909から始めて、jQuery UIのカスタム バージョンを構築します。そのため、ライブラリの修正版を使用する必要があります。

次を使用して、ページ全体のブラウザの右クリックのデフォルト メニューを無効にします。

<body oncontextmenu="return false;">

または特定の要素を参照する：

$("#sortable").bind("contextmenu",function(e){
    return false;
});

jQuery UI コードに対する 2 つの主なカスタム編集を次に示します。

デフォルトのオプションにui.mouse次のオプションを追加します。

その1

jQuery UI リファレンスから:

which (数値) デフォルト: 1

押されたマウスボタンを示す「which」イベント プロパティに一致する数値。(0 = 任意のボタン、1 = 左ボタン、2 = 中央ボタン、3 = 右ボタン)

関数_mouseDownで、このオプションを読み取るようにコードを変更します。

tnIsLeft = (event.which == this.options.which) // instead of this (event.which == 1)

理論的には、jQuery UI の将来のバージョンでは、ハックなしでサポートされる予定です。

ここに実用的なフィドルがあります：http://jsfiddle.net/IrvinDominin/nLdLu/

編集

以下を含む右クリックmodを含むペーストビンバージョンがあります：

  • 含まれるもの: jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.mouse.js、jquery.ui.position.js、jquery.ui.draggable.js、jquery.ui.droppable.js、 jquery.ui.resizable.js、jquery.ui.selectable.js、jquery.ui.sortable.js

リンク: http://pastebin.com/nn3Pj0pM

通常、改造されたコピーは素晴らしいものではありません。マウスの右ボタンを機能させるために必要な 2 つの機能を拡張およびオーバーライドすることもできますが、主な問題は残ります。jQuery UI をアップグレードする場合は、互換性を確認するか、改造を新しいものに移植する必要があります。バージョン。私が見る限り、jQuery UI 2.x はwhich実装をサポートします。

お役に立てれば。

于 2013-03-30T17:16:57.193 に答える
7

jQuery UI のカスタム ビルドを作成してファイルを直接変更する代わりに、ドラッグ可能 (および必要に応じて並べ替え可能) を拡張して、マウスの右クリックを許可することができます。jQuery UI でのマウス操作はすべて、マウス ウィジェット ($.ui.mouse) によって処理されます。ドラッグ可能なウィジェットは、マウスウィジェットを拡張しています。一言で言えば、ドラッグ可能にはマウスと同じメソッドがすべてあります。ドラッグ可能なプロトタイプ ($.ui.draggable.prototype) でそれらをオーバーライドすると、jQuery UI ファイルを変更しなくても、すべてのドラッグ可能なオブジェクトで機能を取得できます。

通常、サード パーティのフレームワークを直接変更することはお勧めできません。これは、アップグレードの妨げになるか、アップグレードのたびに変更内容をコピーする必要があるためです。

主なアイデアは、いくつかの関数をオーバーライドすることです。

$.extend($.ui.draggable.prototype, {...});

変更されたドラッグ可能オブジェクトの実際の例を次に示します: http://jsfiddle.net/NjXdv/4/ 追加のパラメーター、mouseButton を取ります。何も渡さない場合は、マウスの左ボタンが使用されます。3 を渡すと、マウスの右ボタンが使用されます。中央ボタンに 2 を渡すこともできます。

PSこれにより、ページ全体でコンテキストメニューを無効にするのではなく、関心のある要素でのみコンテキストメニューが開かなくなります。

アップデート：

すべての jQuery UI コントロールを別のマウス ボタンで操作できるようにする場合は、ドラッグ可能を拡張する代わりに、マウス自体を拡張する必要があります。前に述べたように、すべての jQuery UI コントロールは $.ui.mouse からマウス イベントを読み取るため、それをオーバーライドすると、すべてのコントロールにカスケードされます。並べ替えとドラッグが可能な更新された例を次に示します: http://jsfiddle.net/NjXdv/7/。お役に立てれば。

于 2013-04-04T01:34:51.863 に答える
1

JQuery UI コア ファイルから

$.extend( $.ui, {
    version: "1.8.23",

    keyCode: {
        ALT: 18,
        BACKSPACE: 8,
        CAPS_LOCK: 20,
        COMMA: 188,
        COMMAND: 91,
        COMMAND_LEFT: 91, // COMMAND
        COMMAND_RIGHT: 93,
        CONTROL: 17,
        DELETE: 46,
        DOWN: 40,
        END: 35,
        ENTER: 13,
        ESCAPE: 27,
        HOME: 36,
        INSERT: 45,
        LEFT: 37,
        MENU: 93, // COMMAND_RIGHT
        NUMPAD_ADD: 107,
        NUMPAD_DECIMAL: 110,
        NUMPAD_DIVIDE: 111,
        NUMPAD_ENTER: 108,
        NUMPAD_MULTIPLY: 106,
        NUMPAD_SUBTRACT: 109,
        PAGE_DOWN: 34,
        PAGE_UP: 33,
        PERIOD: 190,
        RIGHT: 39,
        SHIFT: 16,
        SPACE: 32,
        TAB: 9,
        UP: 38,
        WINDOWS: 91 // COMMAND
    }
});

LEFT AND RIGHT のキーコードを交換すると、うまくいくかもしれません..

于 2013-04-05T08:16:55.707 に答える
0

これを試して：

$('#element').mousedown(function(event) {
    if(event.which == 1) {
        $('#element').draggable();
        $('#element').sortable();
    } else if (event.which == 3) {
        // context menu functions
    }
});
于 2013-04-05T11:35:46.440 に答える