是否可以将Jcrop与jQuery contextMenu结合使用？

Question

我尝试了一些简单的实现方式（例如，将鼠标移到上面，启用contextmenu），但看来这种方式行不通。 可能是zIndex问题吗？

$(function($) {
    $('#test').Jcrop({
        aspectRatio: 1,
        maxSize: [64, 64],
        onSelect: testFunc
    });
});

function testFunc() {
    console.log("onSelect - testFunc()");
    $.contextMenu({
        selector    : '#test',
        items       : {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"}
       }
    });
    console.log("contextMenu"); // Appears to be called but the contextmenu does not appear
}

Answer 1

看看这个小提琴

jQuery contextMenu插件创建一个右键单击时显示的上下文菜单。 如果要使其与JCrop一起使用，则需要禁用默认触发器（右键单击），并从JCrop onSelect手动显示contextMenu。

$(function($) {
  $('#test').Jcrop({
    aspectRatio: 1,
    maxSize: [64, 64],
    onSelect: testFunc
  });

  $.contextMenu({
    selector    : '#test',
    trigger     : 'none', // disable right click trigger
    items       : {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"}
    }
  });
});

function testFunc() {
  // Manually display ContextMenu from registered selector
  $('#test').contextMenu();
}