在jQuery中使用dragstart和dragend捕获拖动量

Question

我想捕获开始拖动的初始位置和拖动量（在 x 和 y 方向）并将其传递给另一个函数以进行进一步处理。我的html如下：

<style>
body{
padding:0;
margin:0;
}
.wrapper{
    width:1800px;
    height:2500px;
    background:#86CDEA;
}
</style>
<div class="wrapper" draggable="true"></div>

我的脚本是：

<script>
    var parentOffset, relX, relY;
    $(".wrapper").on("dragstart", function(event) {
        parentOffset = $(this).offset();
        relX = event.pageX - parentOffset.left;
        relY = event.pageY - parentOffset.top;
        alert("Drag Started - x: "+relX+"px & y: "+relY+"px");
    });

    $(".wrapper").on("dragend", function(event) {
        relX = event.pageX - parentOffset.left;
        relY = event.pageY - parentOffset.top;
        alert("Drag End - x: "+relX+"px & y: "+relY+"px");
    });
  function someFunction(x,y,sftX,sftY){
      //Where x, y is the initial position of the drag and sftX,sftY is the amount of drag in x & y direction respectively which can be +ve or -ve
  }
  </script>

我的目标是使用动画向方向滚动文档或元素，并在拖动量中添加一些额外的像素朝用户想要移动文档或元素的方向。

谁能帮我实现这个目标？

Answer 1

由于您已标记 jquery-ui-draggable，我将使用 jQuery UI draggable 函数。像这样：

var relX, relY;
$('.wrapper').draggable(
{
    drag: function(){
        var offset = $(this).offset();
        relX = offset.left;
        relY = offset.top;           
    }
});

看看这个小提琴：https://jsfiddle.net/tjuh5kpv/

Answer 2

你可以通过 jQuery-UI 来实现，如下所示：

HTML

Start Position: <span id="start"></span>
<br/> 
End Position: <span id="end"></span>

<div class="wrapper" draggable="true">Drag me!</div>

JS

$('.wrapper').draggable({
  start: function(e, ui) {
    // Getting start position
    var parentOffset = $(this).parent().offset();
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    $("#start").html(" x: " + relX + ", y: " + relY);
  },
  stop: function(e, ui) {
    // Getting stop position
    var parentOffset = $(this).parent().offset();
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    $("#end").html(" x: " + relX + ", y: " + relY);
  }
});

Online Demo (jsFiddle)