Question

我希望在点击，拖动和释放操作后显示菜单。

如何使用jQuery触发？

Answer 1

在应点击的任何内容上收听mousedown事件。
将mousemove和mouseup事件处理程序添加到window
在mouseup事件处理程序中调用trigger('yourcustomeventhere')，您可以选择任何元素。另外，从mouseup

mousemove

window

...？
利润。

jQuery是将为您执行此操作的库。我以为我已经很好地解释了代码，但显然不是：

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

Answer 2

您可以使用jQueryUI并让它为您做很多事情。它还带有一个创建UI（当然，因为它是jQuery UI）

看看这个：http://jqueryui.com/demos/droppable/

编辑：

或者看看这里：http://jqueryui.com/demos/draggable/ 仔细看看这里使用的事件。

Answer 3

jQuery UI具有drag和drop实现。如果这不符合您的要求，您必须自行跟踪元素上的mouseup和mousedown事件，从而推出自己的实现。（并且可能mouseleave检测鼠标是否离开了想要跟踪手势的区域。）

jquery：如何在点击 - 保持 - 释放操作后触发事件？

3 个答案: