Draggable Touch是一个基于jQuery的移动第一拖放库，它使任何DOM元素都可以通过触摸事件进行拖动。

支持可拖动的多个元素，甚至同时支持子元素。

该插件还有一个后备功能，可以使用鼠标事件，以防设备不支持触摸事件。

你可以在这里找到更多的拖放库：10个最佳高级拖放插件。

如何使用它:

1.在jquery之后下载并加载jquery.draggableTouch.js。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery.draggableTouch.js"></script>

2.附加功能可拖动触摸到要拖动的目标元素。就是这样。

<div class="draggable">
  Element 1
</div>
 
<div class="draggable">
  Element 2
</div>
 
<div class="draggable">
  Element 3
</div>

$(function(){
  $(".draggable").draggableTouch();
});

3.确定是否使用CSS转换，而不是左&上转换。

$(".draggable").draggableTouch({
  useTransform: true
});

4.拖动开始和结束时将触发的可用事件。

$(".draggable").on("dragstart", function(e, pos) {
  console.log("dragstart:", this, pos.left + "," + pos.top);
}).on("dragend", function(e, pos) {
  console.log("dragend:", this, pos.left + "," + pos.top);
});

5.禁用拖放功能。

$(".draggable").draggableTouch("disable");

更新日志：

2021-11-14

• 在touchstart上调用preventDefault（）以防止放大镜出现在iOS 15上

2021-05-09

• 将我们检查触摸事件是否可用的方式更改为与柏树移动命令兼容的方法

2021-03-11

• 添加对使用CSS转换而不是左上角设置元素位置的支持

预览截图

移动首个拖放库 Draggable Touch