Javascript，在 Dragstart 事件上存储和检索元素的第一个坐标

Question

我想知道如何在 Dragstart 事件中首先存储和检索元素的坐标(offest)。

我正在使用interact.js，但这是一个普遍问题......

到目前为止，我编写了这个函数，因为我想我必须使用闭包并将坐标存储在 Javascript 对象中:

 function checkStartPos(event) {
      var target = event.target,
      targetOffset = $(target).offset(),
      x = targetOffset.left,
      y =  targetOffset.top
        console.log('drag started!');

         return function() {

            return {
            x : x,
            y : y

      }

  }

在“dragend”事件中，我会调用原始值来更改元素样式，以便我的元素回到原始位置...

Answer 1

为什么不直接将 x 和 y 放入全局变量呢？请注意，您还可以使用 event.clientX 和 clientY 属性，而不是 jQuery offset() 内容。

var x, y

$('#example').on('dragstart', function checkStartPos(event) {
    var target = event.target
    x = event.clientX
    y = event.clientY
    console.log('drag started at (' + x + ',' + y + ')')
}).on('dragend', function() {
    console.log('recall: (' + x + ',' + y + ')')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example" style="width:100px;height:100px" draggable>stuff</div>

(我以前没有使用过draggable，并且演示目前不允许您拖动。但是，让东西拖动似乎不是您的问题，并且鉴于您之前的工作设置，示例 JS 应该执行您想要的操作。)