jQuery 移动端拖拽(模块化开发,触摸事件,webpack)

前端之家收集整理的这篇文章主要介绍了jQuery 移动端拖拽(模块化开发,触摸事件,webpack)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

通过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模块的代码

图片的初始列表 getInitImg:function(parent){ var num = 50; $.ajax({ type:"GET",async:false,//这里使用同步加载,因为要让图片加载完成后才能做其他操作 url:'/Home/picwall/index',success:function(result){ if(result.status == 1) { $.each(result.data,function (index,item) { var src = item.pic_src; var width = parseInt(item.width); var height = parseInt(item.height); var ratio = num / height; var img = $('').attr("src",src).height(num).width(parseInt(width * ratio)); parent.append(img); }); } },dataType:'json' }); } }; module.exports = ajax;//将ajax模块暴露出来 @H_403_25@

三.position模块的代码

dragListPar.offset().top){ isSituate = $target.offset().top > control.offset().top && $target.offset().left > control.offset().left && ($target.offset().left + $target.width()) < (control.offset().left + control.width()); }else{ isSituate = ($target.offset().top + $target.height())<(control.offset().top + control.height()) && $target.offset().top > control.offset().top && $target.offset().left > control.offset().left && ($target.offset().left + $target.width()) < (control.offset().left + control.width()); } return isSituate; } }; module.exports = position; @H_403_25@

四.drag模块的代码

获取拖拽元素父元素id和控制台的ID的值 setID:function(dragList,control){ this.dragParent = dragList; this.control = control; },touchStart:function(e){ var target = e.target; //阻止冒泡 e.stopPropagation(); //阻止浏览器默认的缩放和滚动 e.preventDefault(); var $target = $(target); //手指刚触摸到屏幕上时,触摸点的位置 drag.startTouchPos.X = e.targetTouches[0].clientX; drag.startTouchPos.Y = e.targetTouches[0].clientY; //触摸元素相对视口的位置 drag.position.X = $target.offset().left; drag.position.Y = $target.offset().top; //触摸点相对于视口的位置,滑动过程中不断更新 drag.touchPos.X = e.targetTouches[0].clientX; drag.touchPos.Y = e.targetTouches[0].clientY; //触摸点相对于触摸元素的位置 drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X; drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y; //给目标元素绑定touchMove事件 $target.unbind('touchmove').on('touchmove',drag.touchMove); },touchMove:function(e){ var target = e.target; //阻止冒泡 e.stopPropagation(); //阻止浏览器默认的缩放和滚动 e.preventDefault(); var $target = $(target); //获得触摸点的位置 drag.touchPos.X = e.targetTouches[0].clientX; drag.touchPos.Y = e.targetTouches[0].clientY; //修改移动块的位置 $target.offset({ top: drag.touchPos.Y - drag.touchOffsetPos.Y,left: drag.touchPos.X - drag.touchOffsetPos.X }); //给移动元素绑定touchend事件 $target.unbind('touchend').on('touchend',drag.touchEnd); },touchEnd:function(e) { var target = e.target; //阻止冒泡 e.stopPropagation(); //阻止浏览器默认的缩放和滚动 e.preventDefault(); var $target = $(target); var parent = $target.parent(); //得到控制台和拖动元素列表的父元素 var control = $("#" + drag.control); var dragListPar = $('#' + drag.dragParent); //拖动元素是否位于控制台 var sitControl = position.isRang(control,$target); //拖动结束后,如果拖拽元素的父元素是拖拽列表 if (parent.attr('id') === drag.dragParent) { //如果元素位于控制台 if (sitControl) { var dragChild = $target.clone(); //为克隆出的元素绑定touchstart事件 dragChild.unbind('touchstart').on('touchstart',drag.touchStart); //将克隆出的元素插入到控制台 position.addTo(dragChild,control,$target); } //将原来的触摸元素恢复到初始位置 position.restore($target); } // 拖拽结束后,如果拖拽元素的父元素是控制台,并且元素拖出了控制台 if (parent.attr('id') === drag.control && !sitControl) { $target.remove(); } } }; module.exports = drag; @H_403_25@

五.入口文件index.js的代码

获取可拖拽的元素的列表 ajax.getInitImg(dragList); //初始化可拖拽元素的位置 position.init(dragList,gap); //设置控制台的高度。控制台的高度为屏幕的高度减去拖拽列表的盖度 var control = $('#control'); control.height( $(window).height() - dragList.height() ); //给每个拖动元素绑定touchstart事件 var dragElem = dragList.children(); dragElem.each(function(index,elem){ $(elem).unbind('touchstart').on('touchstart',drag.touchStart); }); //拖拽元素的父元素的id值为dragList,操作台的id值为control drag.setID('dragList','control'); @H_403_25@

六.webpack打包

上面用到了模块化编程的思想,将不同的功能实现写在了不同的模块中,需要用到什么功能就可以用require()去引入,但是浏览器并没有require方法的定义。所以上面的代码并不能直接在浏览器中运行,需要先打包。如果你对webpack还不熟悉你可以去查看这篇文章,webpack的配置文件如下:

插件可以将css文件分离出来,为css文件位于单独的文件中 module.exports = { entry:{ 'index':'./app/js/index.js','jquery':['jquery'] },output:{ path:'./build/',filename:'js/[name].js' },module:{ loaders:[ { test:/\.css/,loader:extractTextWebpack.extract('style','css') } ] },plugins:[ new extractTextWebpack('css/[name].css',{ allChunks:true }),new webpack.optimize.CommonsChunkPlugin({ name:'jquery',filename:'js/jquery.js' }),new autoHtml({ title:"拖拽",filename:"drag.html",template:'./app/darg.html',inject:true }) ] }; @H_403_25@

以上所述是小编给大家介绍的jQuery 移动端拖拽(模块化开发,触摸事件,webpack)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章