五.入口文件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中文网！