JQUERY如何在拖动时禁用不允许的光标?

时间:2017-08-06 16:46:15

标签: javascript jquery html css cursor

我遇到了不允许游标的问题。拖动“拖动”元素时,会出现不允许的光标,我无法再拖动它。我怎么能防止这种情况?我希望在鼠标停止时让我的“拖动”元素始终是“绝对的”。

注意:我知道它可能因为“指针事件”而发生,但我需要它包含在此代码中。

enter image description here

一些代码:

$("#drag").bind({
  mousedown : function (e) {
      var dragged = $(this);
      dragged.css({
          left : e.pageX - (50 / 2),
          top : e.pageY - (50 / 2)
      });
      dragged.addClass("absolute");
      dragged.css({
          'pointer-events' : 'none'
      })
      var upHandler = function () {
          dragged.removeClass("absolute");
          dragged.css({
              'pointer-events' : 'all'
          })
          $("body").off('mouseup', upHandler);
          $("body").off('mousemove', moveHandler);
      }
      var moveHandler = function (e) {
          dragged.css({
              left : e.pageX - (50 / 2),
              top : e.pageY - (50 / 2)
          });
      }

      $("body").bind({
          mouseup : upHandler,
          mousemove : moveHandler
      })
  }
  });

  $("body").mousemove(function (event) {
     $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
  });

https://jsfiddle.net/38zecoL1/1/

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

在处理鼠标事件之前,请致电

e.preventDefault();

它取消阻止浏览器执行默认行为的事件。通常它会在通常不可拖动的元素上显示“不允许”的光标。

您可以看到此操作:https://jsfiddle.net/38zecoL1/4/