Можем ли мы сделать JQuery UI Draggables/Sortables для работы с правой кнопкой мыши

У меня есть страница с функциями, связанными с левой и правой кнопкой мыши, т.е. draggable/sortable на левой кнопке мыши и настраиваемое контекстное меню правой кнопкой мыши.

Что я хочу сделать, так это переключить функции, чтобы контекстное меню работало нажатием левой кнопки мыши, а JQuery UI Draggable/Sortable работает правой кнопкой мыши.

Спасибо за любую помощь.

PS: Я могу настроить пользовательское контекстное меню на левую кнопку мыши. Поэтому мне нужна помощь только с JQuery UI Draggable/Sortable. Спасибо.

Ответ 1

Вместо создания пользовательской сборки пользовательского интерфейса jQuery и непосредственного изменения файлов вы можете просто перетаскивать (и сортировать, если нужно), чтобы разрешить щелчки правой кнопкой мыши. Все взаимодействия с мышью в пользовательском интерфейсе jQuery обрабатываются Mouse Widget ($.ui.mouse). И перетаскиваемый виджет расширяет виджет мыши. Итак, в двух словах, draggable имеет все те же методы, что и мышь. Если вы переопределите те, которые находятся на перетаскиваемом прототипе ($.ui.draggable.prototype), вы можете получить свою функциональность на всех перетаскиваемых объектах без необходимости изменять файлы пользовательского интерфейса jQuery.

Как правило, не рекомендуется изменять сторонние структуры напрямую, так как это предотвратит вас при обновлении или потребует, чтобы вы копировали свои изменения каждый раз при обновлении.

Основная идея состоит в том, чтобы переопределить несколько функций:

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

Вот рабочий пример модифицированного draggable: http://jsfiddle.net/NjXdv/4/ Требуется дополнительный параметр: mouseButton. Если вы ничего не передадите, он будет использовать левую кнопку мыши. Если вы пройдете 3, он будет использовать правую кнопку мыши. Вы также можете попробовать пройти 2 для средней кнопки.

P.S. Это заставит контекстное меню открывать только те элементы, которые вам нужны, вместо того, чтобы отключать его на всей странице.

Update:

Если вы хотите, чтобы все элементы управления jQuery UI имели возможность работать с другой кнопкой мыши, вместо этого, вместо продолжения перетаскивания, вы должны расширить мышь. Как я уже говорил, каждый отдельный пользовательский интерфейс jQuery считывает события мыши из $.ui.mouse, поэтому, если вы переопределите это, он будет каскадом для каждого элемента управления. Здесь обновленный пример с сортировкой и перетаскиванием: http://jsfiddle.net/NjXdv/7/. Надеюсь, это поможет.

Ответ 2

На самом деле это невозможно без взлома кода пользовательского интерфейса jQuery.

Я не знаю, почему вы хотите использовать это поведение, потому что можете путать своих конечных пользователей, но вот возможное решение.

Начиная с этого jQuery UI ticket http://bugs.jqueryui.com/ticket/6909 Я создаю пользовательскую версию jQuery UI. Поэтому вам нужно использовать модифицированную версию библиотеки.

Я отключу меню браузера правой кнопкой мыши по умолчанию для всей страницы, используя:

<body oncontextmenu="return false;">

или ссылаясь на конкретный элемент:

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

Вот два основных пользовательских редактирования кода jQuery UI.

В параметрах ui.mouse по умолчанию добавьте параметр:

которые: 1

Из ссылки jQuery UI:

который (число) по умолчанию: 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/

ИЗМЕНИТЬ

Ниже приведена версия пастебина с правым кликом, включая:

Включает: 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

Обычно измененная копия не является большой вещью, вы также можете расширять и переопределять две функции, необходимые для правильной мыши, но основная проблема остается: если вы обновляете пользовательский интерфейс jQuery, вам нужно проверить совместимость или портировать свои мод в новую версию. Для того, что я вижу, jQuery UI 2.x будет поддерживать реализацию which.

Надеюсь, что это поможет.

Ответ 3

Из файла ядра 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, тогда он может работать.

Ответ 4

Попробуйте следующее:

$('#element').mousedown(function(event) {
    if(event.which == 1) {
        $('#element').draggable();
        $('#element').sortable();
    } else if (event.which == 3) {
        // context menu functions
    }
});