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
2021-05-09
2021-03-11