Trình đơn ngữ cảnh jQuery xung đột với jQuery Draggable

Question

Tôi đang cố gắng jQuery Context Menu với jQuery Draggable hàng trong một jQGrid.

Sự cố tôi gặp phải là vì tôi đã thêm jQuery Context Menu hành động có thể kéo được kích hoạt trên một cú nhấp chuột (cũng như thao tác kéo thông thường). Có vẻ hơi lạ khi tôi nhấp chuột phải một hàng để có được menu, sau đó nhấp vào bên ngoài nó trên một hàng khác (để hủy menu) và hàng đó bắt đầu theo sau con trỏ.

Có phải thực hiện với evt.stopPropagation(); trong đoạn mã sau từ Trình đơn ngữ cảnh jQuery không?

$(this).mousedown(function(e) { 
    var evt = e; 
    evt.stopPropagation(); 
    $(this).mouseup(function(e) { 
     e.stopPropagation(); 
     var srcElement = $(this); 
     $(this).unbind('mouseup'); 
     if(evt.button == 2) { 
      // Hide context menus that may be showing 
      $(".contextMenu").hide(); 

Tôi có thể làm gì ngoài việc chọn giữa menu kéo hoặc menu ngữ cảnh không?

Answer 1

Tôi đã gặp sự cố liên quan - các mục có thể kéo được với menu ngữ cảnh được đính kèm không phải lúc nào cũng có thể kéo được. Trong trường hợp của tôi một mục có thể kéo được (phần tử div trôi nổi trong phần tử div chứa lớn hơn) với menu ngữ cảnh đính kèm chỉ có thể được kéo một lần - khi kéo xong, mục không còn có thể kéo được nữa cho đến khi bạn nhấp vào div chứa. Các mục có thể kéo tương tự gần như không có menu ngữ cảnh luôn có thể kéo được. Tại sao việc nhấp vào khả năng kéo được khôi phục của vùng chứa mà tôi không biết, nhưng nó đã làm như vậy một cách nhất quán.

Cảm ơn câu hỏi của bạn đã chỉ cho tôi đi đúng hướng, tôi nhìn vào đoạn code menu ngữ cảnh và sửa đổi nó như sau, trong đó giải quyết vấn đề của tôi:

jQuery(this).mousedown(function(e) { 
    var evt = e; 
    if (e.button == 2) //Added to make this compatible with draggable 
     evt.stopPropagation(); 
    jQuery(this).mouseup(function(e) { 
     if (e.button == 2) //Added to make this compatible with draggable 
      e.stopPropagation(); 
     var srcElement = jQuery(this); 

Thêm séc e.button == 2 ngừng truyền bá sự kiện nhấp chuột phải và giờ đây các div có thể kéo của tôi vẫn có thể kéo và trình đơn ngữ cảnh vẫn hoạt động. Tôi đã chỉ thử nghiệm này trong IE8 cho đến nay, và tôi không biết nếu nó sẽ giải quyết vấn đề của bạn, nhưng tôi quan tâm để biết nếu nó.

== EDIT ==

mỗi gợi ý từ Carl R cho khả năng tương thích với Chrome:

jQuery(this).mousedown(function(e) { 
    var evt = e; 
    if (e.button != 2) return; //Added to make this compatible with draggable 
    evt.stopPropagation(); 
    jQuery(this).mouseup(function(e) { 
     e.stopPropagation(); 
     var srcElement = jQuery(this); 

Tôi đã thay đổi chế độ như ông đề nghị, và nó chỉ làm việc tốt trong IE8 theo cách này.

Answer 2

Tôi đã gặp sự cố tương tự và chỉ cần nhận xét hai tệp * .stopPropagation đầu tiên() từ jquery.contextMenu.js. Mọi thứ đang hoạt động bình thường ngay bây giờ.

Việc sử dụng duy nhất các điểm dừng này trong trường hợp này có thể là do một số hiệu suất tối thiểu. Trong thực tế, việc thay thế chúng bằng * .preventDefault() sẽ có ý nghĩa hơn đối với tôi. Tui bỏ lỡ điều gì vậy?