在mouseup-event中使用mousedown-position

Question

大家好，我正在嘗試一個簡單的元素定制拖放系統。 我想為此使用mousedown和mouseup事件。

我的問題是我不知道如何在mouseup事件中獲取mousedown位置。

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

我試圖從此處修改解決方案以僅獲取第一個和最后一個值，但是失敗了： 如何獲取在mousedown到mouseup事件之間的所有鼠標坐標

我感謝ypu可以給我的每條小費

先感謝您

Answer 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)
});

Answer 2

您可以將data- *屬性與jQuery的.data（）方法一起使用

 $('#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>