jQuery mobile drag (modular development, touch event, webpack)

Durch jQuery kann das Drag-and-Drop auf dem Client-Ende einfach implementiert werden. Auf dem mobilen Endgerät funktioniert es jedoch nicht gut. Daher habe ich selbst einen Drag-and-Drop-Demo für das mobile Endgerät geschrieben, der hauptsächlich die Berührungsevents (touchstart, touchmove und touchend) verwendet.

Die Funktion, die dieses Demo implementiert, ist: Die schiebbaren Elemente (hier sind es Bilder) befinden sich in der Liste und können in die festgelegte Region gezogen werden. Nachdem die festgelegte Region (Konsol) erreicht wurde, wird das Element in die Konsol eingefügt, das ursprüngliche schiebende Element kehrt in seine ursprüngliche Position zurück und das neue Element kann in der Konsol weiter verschoben und auch aus der Konsol herausgezogen werden.

In diesem Demo werden drei Module verwendet, nämlich das Ajax-Modul, das Drag-Modul und das Position-Modul. Das Ajax-Modul wird zur Durchführung von Ajax-Anfragen verwendet (alle Bilddateien werden über Ajax-Anfragen erhalten), das Drag-Modul wird zur Implementierung von Elemente-Schieben verwendet und das Position-Modul wird zur Durchführung von Positionsoperationen von Elementen verwendet (z.B. Position initialisieren, wiederherstellen, entfernen). Das Eingangsdatei des Demos ist indx.js und die drei Module-Dateien werden im selben Ordner gespeichert. Nach der Codierung wird durch webpack gepackt. Die Entwicklungscode befindet sich im Ordner app und die gepackte Code befindet sich im Ordner build.

1. Einführung in die Berührungsevents

Es gibt drei Berührungsevents, nämlich touchstart, touchmove und touchend. Der touchstart-Event wird ausgelöst, wenn der Finger auf den Bildschirm getippt wird. touchmove wird kontinuierlich ausgelöst, wenn der Finger auf dem Bildschirm geglitten wird. Während dieses Events kann die Standardaktion abgebrochen werden, um das Blättern der Seite zu verhindern. Das touchend-Event wird ausgelöst, wenn der Finger vom Bildschirm genommen wird. Diese drei Berührungsevents haben neben den gängigen Mouse-Event-Attributen noch die folgenden drei Attribute:

　　　　touches: Array von Touch-Objekten, die die aktuellen Berührungsaufgaben darstellen.

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

　　changeTouches: Array von Touch-Objekten, die seit der letzten Berührung geändert wurden.

In diesem Beispiel ist es erforderlich, die Position des Berührungspunkts relativ zum Viewport zu erhalten, daher verwende ich event.targetTouches[0].clientX und event.targetTouches[0].clientY

Zwei. Code des AJAX-Moduls

var $ = require('jquery');
var ajax = {
//erhalten Sie die Liste der initialen, verschiebbaren Bilder
getInitImg: function(parent) {
var num = 50;
$.ajax({
type: "GET",
async: false,//Hier wird同步加载使用， da die Bilder vollständig geladen sein müssen, bevor andere Aktionen ausgeführt werden können
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;//Stellen Sie den ajax-Modul zur Verfügung

Dritter Code des position-Moduls

var $ = require('jquery');
var position = {
//Initialisieren Sie den Standort, gap ist ein Objekt, das die Abstände der Elemente darstellt
init:function(parent,gap){
var dragElem = parent.children();
//Stellen Sie sicher, dass der übergeordnete Element relativ positioniert ist
if(parent.css('position') !== "relative"){
parent.css('position','relative');
}
parent.css({
'width':"100%",
'z-index':'10"}}"
});
//Die Breite des aktuellen Listeninhalts
var ListWidth = 0;
//In welcher Spalte sich befindet
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//Stellen Sie den ursprünglichen Standort des Elements ein
curEle.css({
position:"absolute",
top:gap.Y,
left:ListWidth + gap.X
});
//Fügen Sie jedem Element eine eindeutige Identifikation hinzu, die bei der Wiederherstellung des ursprünglichen Standorts nützlich ist
curEle.attr('index',index);
//Speichern Sie den ursprünglichen Standort des Elements
position.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//Stellen Sie die Höhe des übergeordneten Elements ein
parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//Fügen Sie das Kindselement in das übergeordnete Element ein
addTo:function(child,parent,target){
//Die Position des übergeordneten Elements im Bildschirmfenster
var parentPos = {
X:parent.offset().left,
Y:parent.offset().top
};
//Die Zielposition relativ zum Bildschirmfenster
var targetPos = {
X:target.offset().left,
Y:target.offset().top
};
//Stellen Sie sicher, dass der übergeordnete Element relativ positioniert ist
if(parent.css('position') !== "relative"){
parent.css({
'position':'relative'
});
}
parent.css({
'z-index':'12"}}"
});
//Fügen Sie das Kind-Element in das Elternelement ein
parent.append(child);
//Bestimmen Sie den Ort des Kind-Elements im Elternelement und stellen Sie sicher, dass die Größe des Kind-Elements unverändert bleibt
child.css({
　　　　　　　position:absolute,
top:targetPos.Y - parentPos.Y,
left:targetPos.X - parentPos.X,
width:target.width(),
height:target.height()
});
},
//Setzen Sie das Element in seine ursprüngliche Position zurück
restore:function(elem){
//Das Kennzeichen des Elements erhalten
var index = parseInt( elem.attr('index') );
elem.css({
top:position.coord[index].Y,
left:position.coord[index].X
});
},
//Die ursprüngliche Koordinate des Ziehelements
coord:[],
//Prüfen, ob das Element A im Bereich des Elements B liegt
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;

vier. Der Code des drag-Moduls

var $ = require('jquery');
var position = require('./position.js');
var drag = {
//der ID des übergeordneten Elements des Ziehelements
dragParen:undefined,
//ID-Wert der Bedienoberfläche
control: undefined,
//Position des Verschiebeblocks relativ zum Viewport
position: {
X: undefined,
Y: undefined
},
//Position des Berührungspunkts relativ zum Viewport, wird während des Gleitens ständig aktualisiert
touchPos: {
X: undefined,
Y: undefined
},
//Position des Berührungspunkts relativ zum Viewport zum Zeitpunkt des ersten Berührens
startTouchPos: {
X: undefined,
Y: undefined
},
//Position des Berührungspunkts relativ zum Verschiebeblock
touchOffsetPos: {
X: undefined,
Y: undefined
},
//Erhalten Sie den Wert der ID des Elternelements des Verschiebeelements und der ID des Kontrollconsols
setID: function(dragList, control){
this.dragParent = dragList;
this.control = control;
},
touchStart: function(e){
var target = e.target;
//Verhindern Sie das Blasen
e.stopPropagation();
//Verhindern Sie die Standardvergrößerung und das Scrollen des Browsers
e.preventDefault();
var $target = $(target);
//Position des Berührungspunkts, wenn der Finger gerade auf dem Bildschirm berührt wird
drag.startTouchPos.X = e.targetTouches[0].clientX;
drag.startTouchPos.Y = e.targetTouches[0].clientY;
//Position des Berührungselements relativ zum Viewport
drag.position.X = $target.offset().left;
drag.position.Y = $target.offset().top;
//Position des Berührungspunkts relativ zum Viewport, wird während des Gleitens ständig aktualisiert
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//Position des Berührungspunkts relativ zum Berührungselement
drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X;
drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y;
//Binden Sie das touchMove-Ereignis an das Zielobjekt
$target.unbind('touchmove').on('touchmove', drag.touchMove);
},
touchMove: function(e){
var target = e.target;
//Verhindern Sie das Blasen
e.stopPropagation();
//Verhindern Sie die Standardvergrößerung und das Scrollen des Browsers
e.preventDefault();
var $target = $(target);
//Erfassen Sie die Position des Berührungspunkts
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//Ändern Sie die Position des Verschiebeblocks
$target.offset({
top: drag.touchPos.Y - drag.touchOffsetPos.Y,
links: drag.touchPos.X - drag.touchOffsetPos.X
});
//Binden Sie das touchend-Ereignis für das bewegte Element
$target.unbind('touchend').on('touchend',drag.touchEnd);
},
touchEnd:function(e) {
var target = e.target;
//Verhindern Sie das Blasen
e.stopPropagation();
//Verhindern Sie die Standardvergrößerung und das Scrollen des Browsers
e.preventDefault();
var $target = $(target);
var parent = $target.parent();
//Erhalten Sie den übergeordneten Element der Konsole und der Liste der gezogenen Elemente
var control = $("#" + drag.control);
var dragListPar = $('#' + drag.dragParent);
//Ob das gezogene Element in der Konsole ist
var sitControl = position.isRang(control, dragListPar, $target);
//Nach dem Ziehen, wenn der übergeordnete Element des gezogenen Elements die Ziehliste ist
if (parent.attr('id') === drag.dragParent) {
//Wenn das Element in der Konsole ist
if (sitControl) {
var dragChild = $target.clone();
//Binden Sie das touchstart-Ereignis für das geklonte Element
dragChild.unbind('touchstart').on('touchstart',drag.touchStart);
//Fügen Sie das geklonte Element in die Konsole ein
position.addTo(dragChild, control, $target);
}
//Stellen Sie das ursprüngliche Berührungselement in die ursprüngliche Position zurück
position.restore($target);
}
// Nach dem Ziehen, wenn der übergeordnete Element des gezogenen Elements die Konsole ist und das Element aus der Konsole gezogen wurde
if (parent.attr('id') === drag.control && !sitControl) {
$target.remove();
}
}
};
module.exports = drag;

Fünf. Code der Eingabedatei 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');
//Horizontale und vertikale Abstände der beweglichen Elemente
var gap = {
X:20,
Y:10
};
//Erhalten Sie die Liste der beweglichen Elemente über ajax
ajax.getInitImg(dragList);
//Initialisieren Sie den Ort der beweglichen Elemente
position.init(dragList,gap);
//Stellen Sie die Höhe des Bedienerbretts ein. Die Höhe des Bedienerbretts beträgt die Höhe des Bildschirms minus der Deckung des Ziehlisten
var control = $('#control');
control.height( $(window).height() - dragList.height() );
//Binden Sie den touchstart-Event für jedes Ziehelement
var dragElem = dragList.children();
dragElem.each(function(index,elem){
$(elem).unbind('touchstart').on('touchstart',drag.touchStart);
});
//Der ID-Wert des übergeordneten Elements des Elements für das Ziehen ist dragList und der ID-Wert des Bedienerbretts ist control
drag.setID('dragList','control');

6. webpack-Paketerstellung

In diesem Beispiel wurde das Prinzip der Modularisierung verwendet, um verschiedene Funktionalitäten in verschiedenen Modulen zu implementieren. Man kann die erforderliche Funktion mit require() einbinden, aber der Browser hat keine Definition für das require()-Verfahren. Daher kann der obige Code nicht direkt im Browser ausgeführt werden und muss zuerst gepackt werden. Wenn Sie mit webpack noch nicht vertraut sind, können Sie diesen Artikel überprüfen. Die Konfigurationsdatei von webpack ist wie folgt:

var autoHtml = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextWebpack = require('extract-text-webpack-plugin');// Diese Erweiterung kann CSS-Dateien trennen und sicherstellen, dass CSS-Dateien in separaten Dateien gespeichert werden
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:"Ziehen und Loslassen",
filename:"drag.html",
template:'./app/darg.html',
inject:true
}
]
};

Die oben genannten Informationen sind von mir für Sie vorgestellt worden. jQuery Mobile Drag & Drop (Modularer Entwicklung, Berührungseingaben, webpack). Ich hoffe, dass es Ihnen hilft. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht, ich werde rechtzeitig antworten. Ich danke auch sehr für die Unterstützung der Website Anleitungshub.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheberrechtinhaber. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sie übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, senden Sie bitte eine E-Mail an: notice#w3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheberrechtinhaber. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sie übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, senden Sie bitte eine E-Mail an: notice#w