在 mouseup-event 中使用 mousedown-position答案

【问题标题】：Using mousedown-position in mouseup-event在 mouseup-event 中使用 mousedown-position
【发布时间】：2019-09-06 14:51:43
【问题描述】：

大家好，我正在尝试一个简单的自定义元素拖放系统。我想为此使用 mousedown 和 mouseup 事件。

我的问题是我不知道如何在 mouseup-event 中获取 mousedown-position。

div.mousedown(function (e) {
  var cursorDown = e.pageX;
}).mouseup(function (e) {
  alert(cursorDown)
})

我试图从这里修改解决方案只获取第一个和最后一个值，但我失败了：How can I retrieve all mouse coordinates between mousedown to mouseup event

感谢您给我的每一个提示

提前谢谢你

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要将其存储在事件处理程序之外。

要么在一个变量中（如果它们只是一个或者它被包装在一个插件中） - 或者，为了保持它自包含，针对项目：

div.mousedown(function (e) {
  $(this).data("cursorDown", e.pageX)
}).mouseup(function (e) {
  var cursorDown = $(this).data("cursorDown")
  alert(cursorDown)
})

修改其他解决方案：

var allPoints = [];
div.mousedown(function (e) {
  $(this).on("mousemove", trackPoints); 
}).mouseup(function (e) {
  $(this).off("mousemove", trackPoints);

  var cursorDown = allPoints[0];
  allPoints = [];  // clear drag details
});

function trackPoints(e) {
  allPoints.push({ x: e.pageX, y: e.pageY });
}

或者，使用变量

var cursorDown = {};
div.mousedown(function (e) {
  cursorDown = { x: e.pageX, y: e.pageY };
}).mouseup(function (e) {
  alert(cursorDown)
});

【讨论】：

【解决方案2】：

您可以将 data-* 属性与 jQuery's .data() Method 一起使用

$('#box').on({
  mousedown(evt) {
    $(this).data('xyDn', {x: evt.pageX, y: evt.pageY});
  },
  mouseup(evt) {
    const xyDn = $(this).data('xyDn');
    const xyUp = {x: evt.pageX, y: evt.pageY};
    console.log(`
      DN = x:${xyDn.x} y:${xyDn.y}
      UP = x:${xyUp.x} y:${xyUp.y}
    `);
  },
});

html, body {
  height: 100%;
  margin: 0;
}

#box {
  width: 100vw;
  height: 100vh;
}

<div id="box"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：