Question

如果您单击红色框并显示指针相对于框的坐标，这是一个示例小提琴。

如果单击并拖动，我如何修改此脚本以允许更新坐标？当我按住点击并移动鼠标时，允许坐标更新。

http://jsfiddle.net/lonesomeday/5qxtL/2/

来自小提琴的代码：

$('#target').mousedown(function(e) {
    var offset = $(this).offset(),
        imgLeft = e.pageX - offset.left,
        imgTop = e.pageY - offset.top;

    $('#result').text('Mouse clicked x = ' + imgLeft + ' Y = ' + imgTop);
});

我尝试了一些不同的东西，但到目前为止还没有任何工作，除了没有答案的问题之外，找不到其他问题。

由于

Answer 1

只需在鼠标按下时设置一个标记，然后在鼠标移动时检查它。你拖累了：

var mouseDownFlag = false;
$('#target').mousedown(function(e) {
  mouseDownFlag = true;
  var offset = $(this).offset(),
    imgLeft = e.pageX - offset.left,
    imgTop = e.pageY - offset.top;

  $('#result').text('Mouse clicked x = ' + imgLeft + ' Y = ' + imgTop);
});
$('#target').mouseup(function(e) {
  mouseDownFlag = false;
});
$('#target').mousemove(function(e) {
  if (mouseDownFlag) {
    var offset = $(this).offset(),
      imgLeft = e.pageX - offset.left,
      imgTop = e.pageY - offset.top;
    $('#result').text('Mouse clicked x = ' + imgLeft + ' Y = ' + imgTop);
  }
});

div {
  width: 200px;
  height: 100px;
  position: relative;
  left: 30px;
  top: 15px;
  background-color: #f00;
}
#result {
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">My target div</div>
<div id="result"></div>

在单击保持和拖动期间，偏移不会更新mousedown事件

1 个答案: