Question

I want to show a menu after a click, drag, and release action.

How do I trigger that with jQuery?

Answer 1

1. Listen for a mousedown event on whatever should be clicked on.
2. Add a mousemove and mouseup event handler to the window
3. In the mouseup event handler call trigger('yourcustomeventhere') on whatever element you please. Also, remove the mouseup and mousemove event handlers from window
4. …?
5. profit.

jQuery is the library that will do this for you. I thought I explained the code well enough, but apparantly not:

$(anElement).mousedown(foodown);

function foodown(){
  $(window).mousemove(foomove).mouseup(fooup);
  //stuff
}

function foomove(){
  //stuff
}

function fooup(){
  $(someElement).trigger('yourcustomevent');
  $(window).unbind('mousemove', foomove).unbind('mouseup', fooup);
}

---

/**
 * Dragondrop jQuery plugin by zzzzBov
 */
(function ($) {
  "use strict";
  var $window;

  function begin(e) {
    var event;
    $window.mousemove(drag).mouseup(end);
    event = $.Event('beginDragon');
    $(e.target).trigger(event);
    if (event.isDefaultPrevented()) {
      e.preventDefault();
    }
  }

  function drag(e) {
    var event;
    event = $.Event('dragDragon');
    $(e.target).trigger(event);
    if (event.isDefaultPrevented()) {
      e.preventDefault();
    }
  }

  function end(e) {
    var event;
    event = $.Event('endDragon');
    $(e.target).trigger(event);
    $window.unbind('mousemove', drag).unbind('mouseup', end);
    if (event.isDefaultPrevented()) {
      e.preventDefault();
    }
  }

  $.each('beginDragon dragDragon endDragon'.split(' '), function (i, name) {
    $.fn[name] = function(data,fn) {
      if (fn == null) {
        fn = data;
        data = null;
      }
      return arguments.length > 0 ?
        this.bind(name, data, fn) :
        this.trigger(name);
    };
  });

    $window = $(window);
    $window.mousedown(begin);
}(jQuery));