Question

我想检测静态（无移动）元素上拖动事件的方向。根据我搜索的内容，他们使用元素将移动的jquery-ui draggable。

这是我的尝试（我使用containment来停止它的移动，但后来我无法检测拖动的方向）

var prevX = -1;

$('div').draggable({
  containment: "parent",
  drag: function(e) {
    //console.log(e.pageX);
    if (prevX == -1) {
      prevX = e.pageX;
      return false;
    }
    
    // dragged left
    if (prevX > e.pageX) {
      alert('dragged left');
    } else if (prevX < e.pageX) { // dragged right
      alert('dragged right');
    }
    
    prevX = e.pageX;
  }
});

.wrapper {
  width: 100px;
  height: 100px;
}
.inside {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">
  <div class="inside"></div>
</div>

Answer 1

使用dragstart保存起始位置X Y，结束dragend进行比较

如何通过运动约束来检测从左到右的阻力？

1 个答案: