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模块的代码模块的代码
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;
//位于第几列