首页 web前端 js教程 jQuery 移动端拖拽(模块化开发,触摸事件,webpack)

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

Jan 04, 2017 pm 02:16 PM

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

var $ = require('jquery');
var 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模块暴露出来
登录后复制

三.position模块的代码

var $ = require('jquery');
var position = {
//初始化位置,gap是一个表示元素间距的对象
init:function(parent,gap){
var dragElem = parent.children();
//确保父元素是相对定位
if(parent.css('position') !== "relative"){
parent.css('position','relative');
}
parent.css({
'width':"100%",
'z-index':'10'
});
//当前列表内容的宽度
var ListWidth = 0;
//位于第几列
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//设置元素的初始位置
curEle.css({
position:"absolute",
top:gap.Y,
left:ListWidth + gap.X
});
//为每个元素添加一个唯一的标识,在恢复初始位置时有用
curEle.attr('index',index);
//将元素的初始位置保存起来
position.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//设置父元素的高度
parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//将子元素插入到父元素中
addTo:function(child,parent,target){
//父元素在视口的坐标
var parentPos = {
X:parent.offset().left,
Y:parent.offset().top
};
//目标位置相对于视口的坐标
var targetPos = {
X:target.offset().left,
Y:target.offset().top
};
//确保父元素是相对定位
if(parent.css('position') !== "relative"){
parent.css({
'position':'relative'
});
}
parent.css({
'z-index':'12'
});
//将子元素插入父元素中
parent.append(child);
//确定子元素在父元素中的位置并且保证子元素的大小不变
child.css({
       position:absolute,
top:targetPos.Y - parentPos.Y,
left:targetPos.X - parentPos.X,
width:target.width(),
height:target.height()
});
},
//将元素恢复到原来的位置
restore:function(elem){
//获得元素的标识
var index = parseInt( elem.attr('index') );
elem.css({
top:position.coord[index].Y,
left:position.coord[index].X
});
},
//拖拽元素的初始坐标
coord:[],
//判断元素A是否在元素B的范围内
isRang:function(control,dragListPar,$target){
var isSituate = undefined;
if(control.offset().top > 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;
登录后复制

四.drag模块的代码

var $ = require(&#39;jquery&#39;);
var position = require(&#39;./position.js&#39;);
var drag = {
//拖拽元素的父元素的id
dragParen:undefined,
//操作台的id值
control:undefined,
//移动块相对视口的位置
position:{
X:undefined,
Y:undefined
},
//触摸点相对视口的位置,在滑动过程中会不断更新
touchPos:{
X:undefined,
Y:undefined
},
//开始触摸时触摸点相对视口的位置
startTouchPos:{
X:undefined,
Y:undefined
},
//触摸点相对于移动块的位置
touchOffsetPos:{
X:undefined,
Y:undefined
},
//获取拖拽元素父元素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(&#39;touchmove&#39;).on(&#39;touchmove&#39;,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(&#39;touchend&#39;).on(&#39;touchend&#39;,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 = $(&#39;#&#39; + drag.dragParent);
//拖动元素是否位于控制台
var sitControl = position.isRang(control, dragListPar, $target);
//拖动结束后,如果拖拽元素的父元素是拖拽列表
if (parent.attr(&#39;id&#39;) === drag.dragParent) {
//如果元素位于控制台
if (sitControl) {
var dragChild = $target.clone();
//为克隆出的元素绑定touchstart事件
dragChild.unbind(&#39;touchstart&#39;).on(&#39;touchstart&#39;,drag.touchStart);
//将克隆出的元素插入到控制台
position.addTo(dragChild, control, $target);
}
//将原来的触摸元素恢复到初始位置
position.restore($target);
}
// 拖拽结束后,如果拖拽元素的父元素是控制台,并且元素拖出了控制台
if (parent.attr(&#39;id&#39;) === drag.control && !sitControl) {
$target.remove();
}
}
};
module.exports = drag;
登录后复制

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

require(&#39;../css/base.css&#39;);
require(&#39;../css/drag.css&#39;);
var $ = require(&#39;jquery&#39;);
var drag = require(&#39;./drag.js&#39;);
var position = require(&#39;./position.js&#39;);
var ajax = require(&#39;./ajax.js&#39;);
var dragList = $(&#39;#dragList&#39;);
//可拖拽元素的水平,竖直间距
var gap = {
X:20,
Y:10
};
//通过ajax获取可拖拽的元素的列表
ajax.getInitImg(dragList);
//初始化可拖拽元素的位置
position.init(dragList,gap);
//设置控制台的高度。控制台的高度为屏幕的高度减去拖拽列表的盖度
var control = $(&#39;#control&#39;);
control.height( $(window).height() - dragList.height() );
//给每个拖动元素绑定touchstart事件
var dragElem = dragList.children();
dragElem.each(function(index,elem){
$(elem).unbind(&#39;touchstart&#39;).on(&#39;touchstart&#39;,drag.touchStart);
});
//拖拽元素的父元素的id值为dragList,操作台的id值为control
drag.setID(&#39;dragList&#39;,&#39;control&#39;);
登录后复制

六.webpack打包

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

var autoHtml = require(&#39;html-webpack-plugin&#39;);
var webpack = require(&#39;webpack&#39;);
var extractTextWebpack = require(&#39;extract-text-webpack-plugin&#39;);// 这个插件可以将css文件分离出来,为css文件位于单独的文件中
module.exports = {
entry:{
&#39;index&#39;:&#39;./app/js/index.js&#39;,
&#39;jquery&#39;:[&#39;jquery&#39;]
},
output:{
path:&#39;./build/&#39;,
filename:&#39;js/[name].js&#39;
},
module:{
loaders:[
{
test:/\.css/,
loader:extractTextWebpack.extract(&#39;style&#39;,&#39;css&#39;)
}
]
},
plugins:[
new extractTextWebpack(&#39;css/[name].css&#39;,{
allChunks:true
}),
new webpack.optimize.CommonsChunkPlugin({
name:&#39;jquery&#39;,
filename:&#39;js/jquery.js&#39;
}),
new autoHtml({
title:"拖拽",
filename:"drag.html",
template:&#39;./app/darg.html&#39;,
inject:true
})
]
};
登录后复制

以上所述是小编给大家介绍的jQuery 移动端拖拽(模块化开发,触摸事件,webpack),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持!

更多jQuery 移动端拖拽(模块化开发,触摸事件,webpack)相关文章请关注PHP中文网!


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

前端开发中如何实现类似 VSCode 的面板拖拽调整功能? 前端开发中如何实现类似 VSCode 的面板拖拽调整功能? Apr 04, 2025 pm 02:06 PM

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

See all articles