jQuery 移動(dòng)端拖拽（模塊化開發(fā)，觸摸事件，webpack）
更新時(shí)間：2016年10月28日 16:55:38 作者：QxQstar
這篇文章主要介紹了jQuery 移動(dòng)端拖拽（模塊化開發(fā)，觸摸事件，webpack）的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
通過jquery可以很容易實(shí)現(xiàn)CP端的拖拽。但是在移動(dòng)端卻不好用了。于是我自己寫了一個(gè)在移動(dòng)端的拖拽demo，主要用到的事件是觸摸事件（touchstart，touchmove和touchend）。
這個(gè)demo實(shí)現(xiàn)的功能是：可以拖拽的元素（在這里是圖片）位于列表中，這些元素可以被拖到指定區(qū)域，到達(dá)指定區(qū)域（控制臺(tái)）后，元素被插入控制臺(tái)后，原來的拖動(dòng)元素返回原位置，新的元素依然可以在控制臺(tái)中拖動(dòng)，也能拖出控制臺(tái)。
在這個(gè)demo中一個(gè)用三個(gè)模塊，分別為ajax模塊，drag模塊，position模塊。ajax模塊用于實(shí)現(xiàn)ajax請(qǐng)求（所以的圖片資源是通過ajax請(qǐng)求得到的），drag模塊用于實(shí)現(xiàn)元素拖拽，position模塊用于實(shí)現(xiàn)元素位置的操作（如位置初始化，復(fù)原，移除）。demo的入口文件是indx.js和前面三個(gè)模塊文件保存在同一個(gè)文件夾中。編碼完成后通過webpack打包。開發(fā)代碼位于app文件夾中，打包后的代碼位于build文件夾中。
一.觸摸事件的介紹
觸摸事件有三個(gè)，分別是touchstart，touchmove和touchend。touchstart事件在手指觸摸屏幕時(shí)觸發(fā)。touchmove當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。在這個(gè)事件發(fā)生期間取消它的默認(rèn)，可以組織頁(yè)面滾動(dòng)。touchend在手指從屏幕上離開時(shí)觸發(fā)。這三個(gè)觸摸事件的事件對(duì)象除了提供了鼠標(biāo)事件的常見屬性，還包含了下面三個(gè)屬性：
touches：表示當(dāng)前跟蹤的觸摸操作的touch對(duì)象的數(shù)組。
targetTouches：特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。
changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對(duì)象的數(shù)組。
在這個(gè)案例中需要得到觸摸點(diǎn)相對(duì)視口的位置，我使用的是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,//這里使用同步加載，因?yàn)橐寛D片加載完成后才能做其他操作
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是一個(gè)表示元素間距的對(duì)象
init:function(parent,gap){
var dragElem = parent.children();
//確保父元素是相對(duì)定位
if(parent.css('position') !== "relative"){
parent.css('position','relative');
}
parent.css({
'width':"100%",
'z-index':'10'
});
//當(dāng)前列表內(nèi)容的寬度
var ListWidth = 0;
//位于第幾列
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//設(shè)置元素的初始位置
curEle.css({
position:"absolute",
top:gap.Y,
left:ListWidth + gap.X
});
//為每個(gè)元素添加一個(gè)唯一的標(biāo)識(shí)，在恢復(fù)初始位置時(shí)有用
curEle.attr('index',index);
//將元素的初始位置保存起來
position.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//設(shè)置父元素的高度
parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//將子元素插入到父元素中
addTo:function(child,parent,target){
//父元素在視口的坐標(biāo)
var parentPos = {
X:parent.offset().left,
Y:parent.offset().top
};
//目標(biāo)位置相對(duì)于視口的坐標(biāo)
var targetPos = {
X:target.offset().left,
Y:target.offset().top
};
//確保父元素是相對(duì)定位
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()
});
},
//將元素恢復(fù)到原來的位置
restore:function(elem){
//獲得元素的標(biāo)識(shí)
var index = parseInt( elem.attr('index') );
elem.css({
top:position.coord[index].Y,
left:position.coord[index].X
});
},
//拖拽元素的初始坐標(biāo)
coord:[],
//判斷元素A是否在元素B的范圍內(nèi)
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,
//操作臺(tái)的id值
control:undefined,
//移動(dòng)塊相對(duì)視口的位置
position:{
X:undefined,
Y:undefined
},
//觸摸點(diǎn)相對(duì)視口的位置，在滑動(dòng)過程中會(huì)不斷更新
touchPos:{
X:undefined,
Y:undefined
},
//開始觸摸時(shí)觸摸點(diǎn)相對(duì)視口的位置
startTouchPos:{
X:undefined,
Y:undefined
},
//觸摸點(diǎn)相對(duì)于移動(dòng)塊的位置
touchOffsetPos:{
X:undefined,
Y:undefined
},
//獲取拖拽元素父元素id和控制臺(tái)的ID的值
setID:function(dragList,control){
this.dragParent = dragList;
this.control = control;
},
touchStart:function(e){
var target = e.target;
//阻止冒泡
e.stopPropagation();
//阻止瀏覽器默認(rèn)的縮放和滾動(dòng)
e.preventDefault();
var $target = $(target);
//手指剛觸摸到屏幕上時(shí)，觸摸點(diǎn)的位置
drag.startTouchPos.X = e.targetTouches[0].clientX;
drag.startTouchPos.Y = e.targetTouches[0].clientY;
//觸摸元素相對(duì)視口的位置
drag.position.X = $target.offset().left;
drag.position.Y = $target.offset().top;
//觸摸點(diǎn)相對(duì)于視口的位置，滑動(dòng)過程中不斷更新
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//觸摸點(diǎn)相對(duì)于觸摸元素的位置
drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X;
drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y;
//給目標(biāo)元素綁定touchMove事件
$target.unbind('touchmove').on('touchmove',drag.touchMove);
},
touchMove:function(e){
var target = e.target;
//阻止冒泡
e.stopPropagation();
//阻止瀏覽器默認(rèn)的縮放和滾動(dòng)
e.preventDefault();
var $target = $(target);
//獲得觸摸點(diǎn)的位置
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//修改移動(dòng)塊的位置
$target.offset({
top: drag.touchPos.Y - drag.touchOffsetPos.Y,
left: drag.touchPos.X - drag.touchOffsetPos.X
});
//給移動(dòng)元素綁定touchend事件
$target.unbind('touchend').on('touchend',drag.touchEnd);
},
touchEnd:function(e) {
var target = e.target;
//阻止冒泡
e.stopPropagation();
//阻止瀏覽器默認(rèn)的縮放和滾動(dòng)
e.preventDefault();
var $target = $(target);
var parent = $target.parent();
//得到控制臺(tái)和拖動(dòng)元素列表的父元素
var control = $("#" + drag.control);
var dragListPar = $('#' + drag.dragParent);
//拖動(dòng)元素是否位于控制臺(tái)
var sitControl = position.isRang(control, dragListPar, $target);
//拖動(dòng)結(jié)束后，如果拖拽元素的父元素是拖拽列表
if (parent.attr('id') === drag.dragParent) {
//如果元素位于控制臺(tái)
if (sitControl) {
var dragChild = $target.clone();
//為克隆出的元素綁定touchstart事件
dragChild.unbind('touchstart').on('touchstart',drag.touchStart);
//將克隆出的元素插入到控制臺(tái)
position.addTo(dragChild, control, $target);
}
//將原來的觸摸元素恢復(fù)到初始位置
position.restore($target);
}
// 拖拽結(jié)束后，如果拖拽元素的父元素是控制臺(tái)，并且元素拖出了控制臺(tái)
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);
//設(shè)置控制臺(tái)的高度?？刂婆_(tái)的高度為屏幕的高度減去拖拽列表的蓋度
var control = $('#control');
control.height( $(window).height() - dragList.height() );
//給每個(gè)拖動(dòng)元素綁定touchstart事件
var dragElem = dragList.children();
dragElem.each(function(index,elem){
$(elem).unbind('touchstart').on('touchstart',drag.touchStart);
});
//拖拽元素的父元素的id值為dragList,操作臺(tái)的id值為control
drag.setID('dragList','control');
六.webpack打包
上面用到了模塊化編程的思想，將不同的功能實(shí)現(xiàn)寫在了不同的模塊中，需要用到什么功能就可以用require（）去引入，但是瀏覽器并沒有require方法的定義。所以上面的代碼并不能直接在瀏覽器中運(yùn)行，需要先打包。如果你對(duì)webpack還不熟悉你可以去查看這篇文章，webpack的配置文件如下：
var autoHtml = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextWebpack = require('extract-text-webpack-plugin');// 這個(gè)插件可以將css文件分離出來，為css文件位于單獨(dú)的文件中
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 移動(dòng)端拖拽（模塊化開發(fā)，觸摸事件，webpack），希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Bootstrop實(shí)現(xiàn)多級(jí)下拉菜單功能
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。本文重點(diǎn)給大家介紹bootstrap實(shí)現(xiàn)多級(jí)下拉菜單功能的實(shí)例代碼，感興趣的朋友一起學(xué)習(xí)吧2016-11-11
jQuery實(shí)現(xiàn)最簡(jiǎn)單的切換圖效果【可兼容IE6、火狐、谷歌、opera等】
這篇文章主要介紹了jQuery實(shí)現(xiàn)最簡(jiǎn)單的切換圖效果,可兼容IE6、火狐、谷歌、opera等瀏覽器,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-09-09
jQuery改變form表單的action,并進(jìn)行提交的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query改變form表單的action,并進(jìn)行提交的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
Jquery實(shí)現(xiàn)列表(隔行換色,全選,鼠標(biāo)滑過當(dāng)前行)效果實(shí)例
Jquery實(shí)現(xiàn)列表(隔行換色,全選,鼠標(biāo)滑過當(dāng)前行)效果實(shí)例，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了如何在MVC應(yīng)用程序中使用Jquery，并附上示例，給需要的小伙伴們參考下吧2014-11-11
這篇文章主要介紹了jQuery表單驗(yàn)證插件解析(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JQuery自定義事件的應(yīng)用 JQuery最佳實(shí)踐
本文主要介紹JQuery框架里面支持的自定義事件模型，通過實(shí)例說明什么時(shí)候可以利用事件模型進(jìn)行面向?qū)ο蟮腏S編程，以及利用“帶命名空間的事件處理函數(shù)”來避免unbind時(shí)影響別的事件訂閱。2010-08-08
JQuery.Ajax()的data參數(shù)類型實(shí)例詳解
這篇文章主要介紹了JQuery.Ajax()的data參數(shù)類型實(shí)例詳解,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了jQuery中width()方法用法,以實(shí)例形式較為詳細(xì)的分析了width()方法獲取元素寬度的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12