移動端拖拽（模塊化開發，觸摸事件，webpack）
經過jquery能夠很容易實現CP端的拖拽。可是在移動端卻很差用了。因而我本身寫了一個在移動端的拖拽demo，主要用到的事件是觸摸事件（touchstart，touchmove和touchend）。javascript
這個demo實現的功能是：能夠拖拽的元素（在這裏是圖片）位於列表中，這些元素能夠被拖到指定區域，到達指定區域（控制檯）後，元素被插入控制檯後，原來的拖動元素返回原位置，新的元素依然能夠在控制檯中拖動，也能拖出控制檯。css
在這個demo中一個用三個模塊，分別爲ajax模塊，drag模塊，position模塊。ajax模塊用於實現ajax請求（因此的圖片資源是經過ajax請求獲得的），drag模塊用於實現元素拖拽，position模塊用於實現元素位置的操做（如位置初始化，復原，移除）。demo的入口文件是indx.js和前面三個模塊文件保存在同一個文件夾中。編碼完成後經過webpack打包。開發代碼位於app文件夾中，打包後的代碼位於build文件夾中。html
一.觸摸事件的介紹
觸摸事件有三個，分別是touchstart，touchmove和touchend。touchstart事件在手指觸摸屏幕時觸發。touchmove當手指在屏幕上滑動時連續觸發。在這個事件發生期間取消它的默認，能夠組織頁面滾動。touchend在手指從屏幕上離開時觸發。這三個觸摸事件的事件對象除了提供了鼠標事件的常見屬性，還包含了下面三個屬性：java
touches：表示當前跟蹤的觸摸操做的touch對象的數組。jquery
targetTouches：特定於事件目標的Touch對象的數組。webpack
changeTouches：表示自上次觸摸以來發生了什麼改變的Touch對象的數組。web
在這個案例中須要獲得觸摸點相對視口的位置，我使用的是event.targetTouches[0].clientX和event.targetTouches[0].clientYajax
二.ajax模塊的代碼
1 var $ = require('jquery');
2
3 var ajax = {
4 //獲得可拖拽圖片的初始列表
5 getInitImg:function(parent){
6 var num = 50;
7 $.ajax({
8 type:"GET",
9 async:false,//這裏使用同步加載，由於要讓圖片加載完成後才能作其餘操做
10 url:'/Home/picwall/index',
11 success:function(result){
12 if(result.status == 1) {
13 $.each(result.data, function (index,item) {
14 var src = item.pic_src;
15 var width = parseInt(item.width);
16 var height = parseInt(item.height);
17 var ratio = num / height;
18 var img = $('
').attr("src",src).height(num).width(parseInt(width * ratio));
19 parent.append(img);
20 });
21 }
22 },
23 dataType:'json'
24 });
25 }
26 };
27
28 module.exports = ajax;//將ajax模塊暴露出來
三.position模塊的代碼
1 var $ = require('jquery');
2
3 var position = {
4 //初始化位置，gap是一個表示元素間距的對象
5 init:function(parent,gap){
6 var dragElem = parent.children();
7
8 //確保父元素是相對定位
9 if(parent.css('position') !== "relative"){
10 parent.css('position','relative');
11 }
12 parent.css({
13 'width':"100%",
14 'z-index':'10'
15 });
16 //當前列表內容的寬度
17 var ListWidth = 0;
18
19 //位於第幾列
20 var j = 0;
21 dragElem.each(function(index,elem){
22 var curEle = $(elem);
23
24 //設置元素的初始位置
25 curEle.css({
26 position:"absolute",
27 top:gap.Y,
28 left:ListWidth + gap.X
29 });
30
31 //爲每一個元素添加一個惟一的標識，在恢復初始位置時有用
32 curEle.attr('index',index);
33
34 //將元素的初始位置保存起來
35 position.coord.push({
36 X:ListWidth + gap.X,
37 Y:gap.Y
38 });
39 j++;
40
41 //設置父元素的高度
42 parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);
43
44 ListWidth = curEle.offset().left + curEle.width();
45 });
46 },
47 //將子元素插入到父元素中
48 addTo:function(child,parent,target){
49 //父元素在視口的座標
50 var parentPos = {
51 X:parent.offset().left,
52 Y:parent.offset().top
53 };
54
55 //目標位置相對於視口的座標
56 var targetPos = {
57 X:target.offset().left,
58 Y:target.offset().top
59 };
60
61 //確保父元素是相對定位
62 if(parent.css('position') !== "relative"){
63 parent.css({
64 'position':'relative'
65 });
66 }
67
68 parent.css({
69 'z-index':'12'
70 });
71 //將子元素插入父元素中
72 parent.append(child);
73
74 //肯定子元素在父元素中的位置而且保證子元素的大小不變
75 child.css({
76 position:absolute,
77 top:targetPos.Y - parentPos.Y,
78 left:targetPos.X - parentPos.X,
79 width:target.width(),
80 height:target.height()
81 });
82
83 },
84 //將元素恢復到原來的位置
85 restore:function(elem){
86 //得到元素的標識
87 var index = parseInt( elem.attr('index') );
88 elem.css({
89 top:position.coord[index].Y,
90 left:position.coord[index].X
91 });
92
93 },
94 //拖拽元素的初始座標
95 coord:[],
96 //判斷元素A是否在元素B的範圍內
97 isRang:function(control,dragListPar,$target){
98 var isSituate = undefined;
99 if(control.offset().top > dragListPar.offset().top){
100 isSituate = $target.offset().top > control.offset().top
101 && $target.offset().left > control.offset().left
102 && ($target.offset().left + $target.width()) < (control.offset().left + control.width());
103 }else{
104 isSituate = ($target.offset().top + $target.height())<(control.offset().top + control.height())
105 && $target.offset().top > control.offset().top
106 && $target.offset().left > control.offset().left
107 && ($target.offset().left + $target.width()) < (control.offset().left + control.width());
108 }
109 return isSituate;
110 }
111 };
112 module.exports = position;
四.drag模塊的代碼
1 var $ = require('jquery');
2 var position = require('./position.js');
3
4 var drag = {
5 //拖拽元素的父元素的id
6 dragParen:undefined,
7 //操做臺的id值
8 control:undefined,
9 //移動塊相對視口的位置
10 position:{
11 X:undefined,
12 Y:undefined
13 },
14 //觸摸點相對視口的位置，在滑動過程當中會不斷更新
15 touchPos:{
16 X:undefined,
17 Y:undefined
18 },
19 //開始觸摸時觸摸點相對視口的位置
20 startTouchPos:{
21 X:undefined,
22 Y:undefined
23 },
24 //觸摸點相對於移動塊的位置
25 touchOffsetPos:{
26 X:undefined,
27 Y:undefined
28 },
29 //獲取拖拽元素父元素id和控制檯的ID的值
30 setID:function(dragList,control){
31 this.dragParent = dragList;
32 this.control = control;
33 },
34 touchStart:function(e){
35 var target = e.target;
36
37 //阻止冒泡
38 e.stopPropagation();
39
40 //阻止瀏覽器默認的縮放和滾動
41 e.preventDefault();
42
43 var $target = $(target);
44
45 //手指剛觸摸到屏幕上時，觸摸點的位置
46 drag.startTouchPos.X = e.targetTouches[0].clientX;
47 drag.startTouchPos.Y = e.targetTouches[0].clientY;
48
49 //觸摸元素相對視口的位置
50 drag.position.X = $target.offset().left;
51 drag.position.Y = $target.offset().top;
52
53 //觸摸點相對於視口的位置，滑動過程當中不斷更新
54 drag.touchPos.X = e.targetTouches[0].clientX;
55 drag.touchPos.Y = e.targetTouches[0].clientY;
56
57 //觸摸點相對於觸摸元素的位置
58 drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X;
59 drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y;
60
61 //給目標元素綁定touchMove事件
62 $target.unbind('touchmove').on('touchmove',drag.touchMove);
63
64 },
65 touchMove:function(e){
66
67 var target = e.target;
68
69 //阻止冒泡
70 e.stopPropagation();
71
72 //阻止瀏覽器默認的縮放和滾動
73 e.preventDefault();
74
75 var $target = $(target);
76
77 //得到觸摸點的位置
78 drag.touchPos.X = e.targetTouches[0].clientX;
79 drag.touchPos.Y = e.targetTouches[0].clientY;
80
81 //修改移動塊的位置
82 $target.offset({
83 top: drag.touchPos.Y - drag.touchOffsetPos.Y,
84 left: drag.touchPos.X - drag.touchOffsetPos.X
85 });
86
87 //給移動元素綁定touchend事件
88 $target.unbind('touchend').on('touchend',drag.touchEnd);
89 },
90 touchEnd:function(e) {
91 var target = e.target;
92
93 //阻止冒泡
94 e.stopPropagation();
95
96 //阻止瀏覽器默認的縮放和滾動
97 e.preventDefault();
98
99 var $target = $(target);
100 var parent = $target.parent();
101
102 //獲得控制檯和拖動元素列表的父元素
103 var control = $("#" + drag.control);
104 var dragListPar = $('#' + drag.dragParent);
105
106 //拖動元素是否位於控制檯
107 var sitControl = position.isRang(control, dragListPar, $target);
108
109 //拖動結束後，若是拖拽元素的父元素是拖拽列表
110 if (parent.attr('id') === drag.dragParent) {
111 //若是元素位於控制檯
112 if (sitControl) {
113 var dragChild = $target.clone();
114
115 //爲克隆出的元素綁定touchstart事件
116 dragChild.unbind('touchstart').on('touchstart',drag.touchStart);
117
118 //將克隆出的元素插入到控制檯
119 position.addTo(dragChild, control, $target);
120 }
121
122 //將原來的觸摸元素恢復到初始位置
123 position.restore($target);
124 }
125
126 // 拖拽結束後，若是拖拽元素的父元素是控制檯，而且元素拖出了控制檯
127 if (parent.attr('id') === drag.control && !sitControl) {
128 $target.remove();
129 }
130 }
131 };
132 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打包json
上面用到了模塊化編程的思想，將不一樣的功能實現寫在了不一樣的模塊中，須要用到什麼功能就能夠用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
})
]
};
分類:
javascript demo
相關文章
- 1. 移動端拖拽（模塊化開發，觸摸事件，webpack）
- 2. 移動端觸摸事件
- 3. 移動開發：觸摸事件
- 4. 移動端元素拖拽事件
- 5. 移動端關於拖拽事件
- 6. 移動端觸摸（touch）事件
- 7. 移動端js觸摸事件
- 8. Unity3D 觸摸拖拽效果
- 9. 移動端拖拽
- 10. 微信小程序開發之拖拽 image 觸摸事件監聽
- 更多相關文章...
- • jQuery Mobile 觸摸事件 - jQuery Mobile 教程
- • Lua 模塊與包 - Lua 教程
- • PHP開發工具
- • 委託模式
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 移動端拖拽（模塊化開發，觸摸事件，webpack）
- 2. 移動端觸摸事件
- 3. 移動開發：觸摸事件
- 4. 移動端元素拖拽事件
- 5. 移動端關於拖拽事件
- 6. 移動端觸摸（touch）事件
- 7. 移動端js觸摸事件
- 8. Unity3D 觸摸拖拽效果
- 9. 移動端拖拽
- 10. 微信小程序開發之拖拽 image 觸摸事件監聽