jquery: how do I trigger an event after a click-hold-release action?

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

How do I t开发者_开发知识库rigger that with jQuery?

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));

You could use the jQueryUI and let it do a lot for you. It also comes with a create UI (of course, because it's jQuery UI)

Take a look at this: http://jqueryui.com/demos/droppable/

edit:

Or take a look here: http://jqueryui.com/demos/draggable/ Take a close look to the events used here.

jQuery UI has a drag and drop implementation. If that doesn't do what you do, you'll have to roll your own implementation by tracking the mouseup and mousedown events on the element yourself. (And possibly mouseleave to detect if the mouse left the area you want to track the gesture in.)