首页 / WEBPACK / jQuery移动端拖拽（模块化开发，触摸事件，webpack）

jQuery移动端拖拽（模块化开发，触摸事件，webpack）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery移动端拖拽（模块化开发，触摸事件，webpack），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9114字，纯文字阅读大概需要14分钟。

内容图文

通过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('jquery');
var position = require('./position.js');
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('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, dragListPar, $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;

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

require('../css/base.css');
require('../css/drag.css');
var $ = require('jquery');
var drag = require('./drag.js');
var position = require('./position.js');
var ajax = require('./ajax.js');
var dragList = $('#dragList');
//可拖拽元素的水平，竖直间距
var gap = {
X:20,
Y:10
};
//通过ajax获取可拖拽的元素的列表
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');

六.webpack打包

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

var autoHtml = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextWebpack = require('extract-text-webpack-plugin');// 这个插件可以将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
})
]
};

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

更多jQuery 移动端拖拽（模块化开发，触摸事件，webpack）相关文章请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的jQuery移动端拖拽（模块化开发，触摸事件，webpack）全部内容，希望文章能够帮你解决jQuery移动端拖拽（模块化开发，触摸事件，webpack）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/303517.html

来源：【匿名】

【上一篇】怎么使用webpack构建vue.js单页应用【下一篇】关于extract-text-webpack-plugin的使用及安装

更多 ►

【jQuery移动端拖拽（模块化开发，触摸事件，webpack）】教程文章相关的互联网学习教程文章

Vue—07—模块化高级之webpack；【代码】

一. webpack基本使用 webpack是一个前端模块化打包工具;我们在node环境中, 安装了webpack包之后, 只需要新建一个main.js文件, 然后在这个文件和其他文件可以使用任何模块化规范(commonjs\amd\cmd\ed6都行)开发, 最后打包的时候只需要打包这个main.js文件, 其他js文件webpack会自动帮助我们打包的, 代码如下:webpack ./src/main.js ./dist/buddle.js 然后在index.html中引入./dist/buddle.js即可; 二. webpack自定义快捷键...

00-认识webpack - 为什么要模块化 -webpack打包过程【图】

webpack在不进行任何配置的情况下，他只认识js。为什么要打包？因为一个个小文件，我们合成一个，这样请求就只请求一次。 webpack除了打包之外，还具有翻译官的功能？ loader把浏览器看不懂的代码翻译成浏览器看的懂的代码。 Plugin？对文件做点别的事情不管是loader 还是 plugin 都是可插拔，意思就是你什么时候想用，你就装进来，不想用，删掉。所以说webpack不仅强大，而且灵活。为什么要模块化？模块化的好处？如上...

如何使用webpack模块化管理与打包工具

这次给大家带来如何使用webpack模块化管理与打包工具，使用webpack模块化管理与打包工具的注意事项有哪些，下面就是实战案例，一起来看一下。Webpack简介webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块...

怎样使用webpack模块化管理和打包工具

这次给大家带来怎样使用webpack模块化管理和打包工具，使用webpack模块化管理和打包工具的注意事项有哪些，下面就是实战案例，一起来看一下。 Webpack简介webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块...

webpack模块化管理和打包工具使用详解

这次给大家带来webpack模块化管理和打包工具使用详解，webpack模块化管理和打包工具使用的注意事项有哪些，下面就是实战案例，一起来看一下。Webpack简介webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块...

jQuery移动端拖拽（模块化开发，触摸事件，webpack）

通过jquery可以很容易实现CP端的拖拽。但是在移动端却不好用了。于是我自己写了一个在移动端的拖拽demo，主要用到的事件是触摸事件（touchstart，touchmove和touchend）。这个demo实现的功能是：可以拖拽的元素（在这里是图片）位于列表中，这些元素可以被拖到指定区域，到达指定区域（控制台）后，元素被插入控制台后，原来的拖动元素返回原位置，新的元素依然可以在控制台中拖动，也能拖出控制台。在这个demo中一个用三个模块，分...

webpack4.x CommonJS模块化浅析

先看下webpack官方文档中对模块的描述：在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。webpack 的核心概念之一就是一切皆模块，webpack 在项目中的作用就是，分析项目的结构，找到 JavaScript 模块以...

webpack打包非模块化js的方法

本文主要记录了非模块化js如何使用webpack打包模块化打包实现方式 webpack是模块打包工具，通过入口文件递归遍历其依赖图谱，绝对是打包神器。 bar.jsexport default function bar() {// }foo.jsimport bar from ./bar;bar();通过如下，webpack配置很快实现打包。通过插件我们还可以实现文件压缩，开发态我们还可以配置sourceMap进行代码调试(chrome浏览器支持sourcemap调试)。module.exports = {entry: ./foo.js,output: {filena...

详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 A...

jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

模块化打包工具webpack

webpack配置文件先看一下webpack的配置文件，刚开始学的时候有点难，配置文件能够完全看懂，说明入门了// 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {entry: __dirname + "/app/main.js", //唯一入口文件output: {path: __dirname + "/build",filename: ...

WEBPACK - 相关标签

WEBPACK - 最热教程

浅谈webpack打包之后的文件过大的解决方...使用webpack插件html-webpack-plugin实...WebPack配置vue多页面步骤详解【Web】阿里icon图标webpack插件（webp...使用webpack如何实现文件打包在vue-cliwebpack中如何引入jquery（详...使用html-webpack-plugin'入再内存中生...JavaScript反爬笔记（3）_JS进阶（摘要...vue-cli · Failed to download repo vu...vue解决使用webpack打包后keep-alive不...

首页 / WEBPACK / jQuery移动端拖拽（模块化开发，触摸事件，webpack）

jQuery移动端拖拽（模块化开发，触摸事件，webpack）

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery移动端拖拽（模块化开发，触摸事件，webpack）】教程文章相关的互联网学习教程文章

Vue—07—模块化高级之webpack；【代码】

00-认识webpack - 为什么要模块化 -webpack打包过程【图】

如何使用webpack模块化管理与打包工具

怎样使用webpack模块化管理和打包工具

webpack模块化管理和打包工具使用详解

jQuery移动端拖拽（模块化开发，触摸事件，webpack）

webpack4.x CommonJS模块化浅析

webpack打包非模块化js的方法

详解webpack模块化管理和打包工具

jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

模块化打包工具webpack

WEBPACK - 相关标签

JQUERY - 相关标签

开发 - 相关标签

WEBPACK - 最新教程

WEBPACK - 最热教程