Question

我想创建一个类似于iphone“slide to unlock”栏的jquery脚本。我想要2个div，容器和滑块。我希望能够将滑块向右拖动，当滑块到达容器的最右侧时，让它做一些事情。

我不想在这样做时使用jqueryUI，那个库太臃肿了，我已经看到了其他一些拖放脚本但是我尝试过的很多东西都完全失败了，所以现在我回到第1步，想知道是否有一种非常简单的方法可以拖动div，当它到达容器的最右边时，“做某事”。

我真的很感激任何帮助，我想我的头发在这上面了。缺口

Answer 1

在实际滑动对象方面，我建议使用一个已经完成了你正在寻找的库。

jquery UI

这当然是JQuery UI库的链接。但是，大多数UI（用户界面）库都能够滑动对象，因此请选择您最熟悉的对象。如果你不熟悉，我建议做一些研究。

JQuery库应该能够让您滑动对象并检查幻灯片对象的值，这样您就可以知道何时运行锁定/解锁脚本。如上所述，我相信大多数其他图书馆都会给你相同的能力。

Answer 2

好吧，你可以附加到mousedown事件，然后在mousemove上设置div的位置作为鼠标的位置（偏移原始偏移量），直到mouseup（恢复到原始位置），或者充分到对“做点什么”。听起来很简单？

Answer 3

所以我知道这篇文章真的很老，但我正在尝试执行McKay提出的解决方案。我真的很喜欢jquery，所以不要为此烘烤我：D也许有人暗示如何让它发挥作用。

编辑：哦，我也在使用jquery UI解决这个问题。

$(".slider-handle").mousedown(function() {
	$(".slider-handle").on("mousemove", function(){
		$(".slider-handle").css("margin-left" === "event.pageX" + "px");
	});
});

.unlock-slider {
  background: #d1d1d1;
  width: 300px;
  height: 50px;
  position:relative;
}

.slider-handle {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: tomato;
  position: absolute;
  z-index: 10;
}

<div class="slider-wrapper">
 <div class="unlock-slider">
  <div class="slider-handle">
  </div>
 </div>
</div>

Jquery：iphone“滑动解锁”

3 个答案: