Меню триггера Jquery UI-ContextMenu при выделении текста

Question

Я использую плагин https://github.com/mar10/jquery-ui-contextmenu. У меня есть несколько динамически генерируемых div-ов, каждый с предварительным тегом. Я хочу инициализировать плагин один раз, когда пользователь выделяет текст и отпускает левую кнопку мыши, чтобы вызвать контекстное меню, расположенное в позиции мыши.

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

Вот моя скрипка в качестве примера

$("div.editor").contextmenu({
  delegate: "pre",
  menu: [
    {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
    {title: "----"},
    {title: "More", children: [
        {title: "Sub 1", cmd: "sub1"},
        {title: "Sub 2", cmd: "sub1"}
        ]}
    ],
   select: function(event, ui) {
    alert("select " + ui.cmd + " on " + ui.target.text());
  }
});

$("pre").bind("mouseup",function(e){
     $("div.editor").contextmenu('open',$("pre"));
});

<div class="editor"><pre></pre></div>

Это просто пример кода, но он очень похож на то, что я использую. У каждого элемента div есть форма, в которой есть несколько полей, которые мы хотим заполнить большим текстом, который содержится в пред теге. И может быть до 20 тегов div.editor каждый со своей формой.

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

Любая помощь будет принята с благодарностью.

еще раз спасибо

Answer 1

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

Таким образом, вы должны добавить в позицию, когда вы определяете свое контекстное меню. Затем сделайте привязку к mouseup, чтобы запустить метод open. Я использовал функцию extraData, чтобы передать исходное событие мыши. Это то, что сделало это положение мыши, а не в верхнем левом углу экрана.

 $("div.editor").contextmenu({
            delegate: "pre",
            position: function(event, ui){
               return {my: "left top", at: "left bottom", of: ui.extraData, collision: "fit"}; 
            }, 
...});

Затем после определения контекстного меню привязайтесь к событию mouseup, чтобы получить выделенный текст. Я использую несколько функций, чтобы получить выделенный текст и отменить выбор текста (ошибка IE)

$("pre").bind("mouseup",function(e){
            mytext = getSelectionHtml(), t = $(e.target), p = $('#' + t.prop('id'));

            if(mytext.length > 0){
                deselHTML();
                console.log(mytext + ' selected, calling open on the context menu. ' + $(p).prop('class'));
                $("div.editor").contextmenu('open',$(t),e);

            }
        });