Using contextMenu plugin with fileTree plugin without losing draggable support

Question

The server is running off Ruby on Rails. Javascript is written using Coffeescript.

I am currently using the jQuery File Tree plugin with the Context Menu plugin. Both are working at the moment, with one minor problem. I also have draggable enabled in the file tree and it will not cancel after the left click is released. In the picture below, the mouse has been released already.

Mouse up but draggable hasn't cancelled

The page this is loaded on has one div:

<div id="file_tree"></div>

And this div is filled by another page from a different controller. The code is:

<ul class="jqueryFileTree" style="display: none;">
  <% @contents[0].each do |directory| %>
    <li class="directory collapsed"><a href="#" rel="<%= @root + directory %>/"><%= directory %></a></li>
  <% end %>
  <% @contents[1].each do |file| %>
    <li class="file ext_<%= File.extname(file)[1..-1] %>"><a href="#" rel="<%= @root + file %>"><%= file %></a></li>
  <% end %>
</ul>

This page also loads the draggable code:

$ ->
@settings =
  revert: true
  helper: "clone"
  containment: "#file_tree"
  axis: "y"
  scroll: true
  cursorAt:
    top: -2

$(".directory").draggable(@settings)
$(".file").draggable(@settings)

And the context menu is added like this:

$("#file_tree").contextMenu { menu: 'filetree_context_menu' }, (action, element, position) =>
  @on_context_menu(action, element, position, data.root_directory)

Where @on_context_menu is simply a function (it has no bearing on this problem though).

The problem can be stopped (the clone returns to its original) if you click outside the #file_tree div. However, it appears that click, mousedown, and mouseup events are handled correctly. Also, the context menu has no problems and will not induce the draggable problem.

In regards to my searching around for fixes, I have found nothing. The File Tree plugin has an okay amount of information floating around, but the Context Menu one seems to have next to nothing (must be unpopular?). And none of those have both at the same time. If you need some other information, please state.

EDIT: I figured out that this is actually because the plugin needs to call e.stopPropogation() on the mouseup event to prevent it from opening a real context menu. Anybody know how to manually perform a stopdrag() event? It's not working if I call $(this).trigger('stopdrag') in case you were going to suggest that.

Answer 1

Eventually fixed this problem (after quite a while, and while procrastinating to get a Tumbleweed). Just added a check that it was the right button that was clicked, because it was breaking drag by running e.stopPropagation() on BOTH clicks. It's much cleaner than my original work-around that I scrapped.

if(e.button == 2) {
  e.stopPropagation();
}