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

JComboBox

<强> JS

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

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

Online Demo (jsFiddle)

使用jquery中的dragstart和dragend捕获拖动量

2 个答案: