JQUERY如何在拖动时禁用不允许的光标？答案

【问题标题】：JQUERY How to disable not-allowed cursor while dragging?JQUERY如何在拖动时禁用不允许的光标？
【发布时间】：2017-08-06 16:46:14
【问题描述】：

我遇到了不允许使用的光标的问题。拖动“拖动”元素时，出现不允许的光标，我不能再拖动它了。我怎样才能防止这种情况？我想让我的“拖动”元素在鼠标按下时始终是“绝对的”。

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

一些代码：

$("#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/

感谢您的帮助。

【问题讨论】：

标签： javascript html jquery css mouse-cursor

【解决方案1】：

在处理鼠标事件之前，调用

e.preventDefault();

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

$("box").mouseover(function() {
  $(this).addClass("green");
  var box = $(this).attr("id");
  $("#result").html(box);
});

/*
    Solution
*/
$("box").mousedown(function(e) {
  // Booooom! This should stop the undesired default beahvior.
  e.preventDefault();
});

$("box").mouseleave(function() {
  $(this).removeClass("green");
});

$("#drag").bind({
  mousedown: function() {
    $(this).addClass("absolute");
  },
  mouseup: function() {
    $(this).removeClass("absolute");
  },
  mousemove: function(e) {
    $(this).css({
      left: e.pageX - (50 / 2),
      top: e.pageY - (50 / 2)
    });
  }
});

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

box {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 20px;
}

#log {
  position: absolute;
  top: 150px;
}

.green {
  background-color: green;
}

#drag {
  width: 50px;
  height: 50px;
  float: left;
  background-color: blue;
}

#drag.absolute {
  position: absolute;
}

html,
body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

<box id="box1">
  <div id="drag"></div>
</box>
<box id="box2"></box>

<div id="result"></div>
<div id="log"></div>

原小提琴：https://jsfiddle.net/38zecoL1/4/

【讨论】：