jQuery Mobile Drag & Drop (modulare Entwicklung, Touch-Events, Webpack)

CP-seitiges Drag & Drop kann einfach über JQuery realisiert werden. Aber auf der mobilen Seite funktioniert es nicht gut. Also habe ich eine Drag-and-Drop-Demo auf dem mobilen Terminal geschrieben. Die wichtigsten verwendeten Ereignisse sind Touch-Ereignisse (Touchstart, Touchmove und Touchend).

Die von dieser Demo implementierte Funktion ist: Die Elemente, die gezogen werden können (hier sind Bilder), können in den angegebenen Bereich (Konsole) gezogen werden Elemente werden in das Steuerelement eingefügt. Nach der Konsole kehrt das ursprünglich gezogene Element an seine ursprüngliche Position zurück und das neue Element kann weiterhin in die Konsole oder aus der Konsole gezogen werden.

In dieser Demo werden drei Module verwendet, nämlich Ajax-Modul, Drag-Modul und Positionsmodul. Das Ajax-Modul wird zum Implementieren von Ajax-Anfragen verwendet (alle Bildressourcen werden über Ajax-Anfragen abgerufen), das Drag-Modul wird zum Implementieren des Ziehens von Elementen verwendet und das Positionsmodul wird zum Implementieren von Elementpositionsoperationen (z. B. Positionsinitialisierung, Wiederherstellung, Entfernung) verwendet ). Die Einstiegsdatei der Demo ist indx.js und die vorherigen drei Moduldateien werden im selben Ordner gespeichert. Nachdem die Codierung abgeschlossen ist, wird sie über das Webpack gepackt. Der Entwicklungscode befindet sich im App-Ordner und der gepackte Code im Build-Ordner.

1. Einführung in Touch-Ereignisse

Es gibt drei Touch-Ereignisse, nämlich Touchstart, Touchmove und Touchend. Das Touchstart-Ereignis wird ausgelöst, wenn ein Finger den Bildschirm berührt. touchmove wird kontinuierlich ausgelöst, wenn ein Finger über den Bildschirm gleitet. Wenn Sie es während dieses Ereignisses deaktivieren, wird das Scrollen der Seite verhindert. touchend wird ausgelöst, wenn der Finger vom Bildschirm abgehoben wird. Zusätzlich zur Bereitstellung allgemeiner Attribute von Mausereignissen umfassen die Ereignisobjekte dieser drei Berührungsereignisse auch die folgenden drei Attribute:

Berührungen: Ein Array von Berührungsobjekten, die die aktuell verfolgten Berührungsvorgänge darstellen.

TargetTouches: Ein Array von Touch-Objekten, die für das Ereignisziel spezifisch sind.

changeTouches: Ein Array von Touch-Objekten, das angibt, was sich seit der letzten Berührung geändert hat.

In diesem Fall muss ich die Position des Berührungspunkts relativ zum Ansichtsfenster ermitteln. Ich verwende event.targetTouches[0].clientX und event.targetTouches[0].clientY

二.ajax Modulcode

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模块暴露出来

3. Modulcode positionieren

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;

4. Modulcode ziehen

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;

5. Datei index.js Code eingeben

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');

6. Webpack-Paketierung

Das Obige nutzt die Idee der modularen Programmierung und schreibt verschiedene funktionale Implementierungen in verschiedenen Modulen. Sie können alle benötigten Funktionen verwenden. einzuführen, aber der Browser verfügt nicht über eine Definition der Anforderungsmethode. Daher kann der obige Code nicht direkt im Browser ausgeführt werden und muss zuerst gepackt werden. Wenn Sie mit Webpack nicht vertraut sind, können Sie diesen Artikel lesen. Die Konfigurationsdatei von Webpack lautet wie folgt:

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
})
]
};

Das Obige ist das vom Herausgeber eingeführte jQuery Mobile Drag & Drop (modulare Entwicklung). Touch-Event, Webpack), ich hoffe, dass es für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zum Thema jQuery Mobile Drag & Drop (modulare Entwicklung, Touch-Events, Webpack) finden Sie auf der chinesischen PHP-Website!