位置: 编程技术 - 正文
jQuery 移动端拖拽（模块化开发，触摸事件，webpack）(jquery实现移动端)
编辑：rootadmin推荐整理分享jQuery 移动端拖拽（模块化开发，触摸事件，webpack）(jquery实现移动端)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery拖拽功能,jquery实现拖拽效果,jquery移动版,jquery实现移动端,jquery实现移动端,js移动端拖拽,jquery拖拽流程布局,jquery实现拖拽效果,内容如对您有帮助，希望把文章链接给更多的朋友！
通过jquery可以很容易实现CP端的拖拽。但是在移动端却不好用了。于是我自己写了一个在移动端的拖拽demo，主要用到的事件是触摸事件（touchstart，touchmove和touchend）。
这个demo实现的功能是：可以拖拽的元素（在这里是图片）位于列表中，这些元素可以被拖到指定区域，到达指定区域（控制台）后，元素被插入控制台后，原来的拖动元素返回原位置，新的元素依然可以在控制台中拖动，也能拖出控制台。
在这个demo中一个用三个模块，分别为ajax模块，drag模块，position模块。ajax模块用于实现ajax请求（所以的图片资源是通过ajax请求得到的），drag模块用于实现元素拖拽，position模块用于实现元素位置的操作（如位置初始化，复原，移除）。demo的入口文件是indx.js和前面三个模块文件保存在同一个文件夹中。编码完成后通过webpack打包。开发代码位于app文件夹中，打包后的代码位于build文件夹中。
一.触摸事件的介绍
触摸事件有三个，分别是touchstart，touchmove和touchend。touchstart事件在手指触摸屏幕时触发。touchmove当手指在屏幕上滑动时连续触发。在这个事件发生期间取消它的默认，可以组织页面滚动。touchend在手指从屏幕上离开时触发。这三个触摸事件的事件对象除了提供了鼠标事件的常见属性，还包含了下面三个属性：
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
在这个案例中需要得到触摸点相对视口的位置，我使用的是event.targetTouches[0].clientX和event.targetTouches[0].clientY
二.ajax模块的代码
三.position模块的代码
四.drag模块的代码
五.入口文件index.js的代码
六.webpack打包
上面用到了模块化编程的思想，将不同的功能实现写在了不同的模块中，需要用到什么功能就可以用require（）去引入，但是浏览器并没有require方法的定义。所以上面的代码并不能直接在浏览器中运行，需要先打包。如果你对webpack还不熟悉你可以去查看这篇文章，webpack的配置文件如下：
以上所述是小编给大家介绍的jQuery 移动端拖拽（模块化开发，触摸事件，webpack），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析 类似的文章已有，请看这里，个人感觉稍显复杂，日前也打算写一个简单的给项目用，一些关键点记录于此。最终效果如下：后端使用Asp.netmvc5，前端框
jquery ajax后台返回list,前台用jquery遍历list的实现 如下所示：$.ajax({type:'post',url:"maintain_findRoomByBuildingId.shtml",cache:false,data:{"buildingId":buildingId},dataType:'json',success:function(data){jQuery.each(data.roomList,function(i,item
jQuery grep()方法详解及实例代码 什么是jQuery.grep()？jQuery.grep()是一个查找满足过滤函数的数组元素的函数。原始数组不受影响，返回值为数组。用法介绍：写法：jQuery.grep(array,function(ele
标签: jquery实现移动端
本文链接地址:https://www.jiuchutong.com/biancheng/379379.html 转载请保留说明！上一篇：jquery配合.NET实现点击指定绑定数据并且能够一键下载
下一篇：jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
