Spostamento mobile con jQuery (sviluppo modulare, eventi di tocco, webpack)

È facile implementare il trascinamento su CP utilizzando jQuery. Ma non funziona bene sui dispositivi mobili. Quindi ho scritto un demo di trascinamento per dispositivi mobili, che utilizza principalmente eventi di tocco (touchstart, touchmove e touchend).

La funzione implementata da questo demo è: gli elementi trascinabili (in questo caso, le immagini) si trovano nella lista e possono essere trascinati in un'area designata. Una volta raggiunta l'area designata (console), l'elemento viene inserito nella console e l'elemento trascinato originale torna alla sua posizione originale, mentre il nuovo elemento può essere trascinato nella console e può anche essere trascinato fuori dalla console.

In questo demo, ci sono tre moduli, rispettivamente il modulo ajax, il modulo drag e il modulo position. Il modulo ajax viene utilizzato per implementare le richieste ajax (tutti i risorse di immagine sono ottenute tramite richieste ajax), il modulo drag viene utilizzato per implementare il trascinamento degli elementi, e il modulo position viene utilizzato per gestire la posizione degli elementi (ad esempio, inizializzazione della posizione, ripristino, rimozione). Il file di ingresso del demo è indx.js e i tre moduli precedenti sono conservati nella stessa cartella. Dopo la codifica, il codice viene compresso utilizzando webpack. Il codice di sviluppo si trova nella cartella app e il codice compresso si trova nella cartella build.

1. Introduzione agli eventi di tocco

Ci sono tre eventi di tocco, ovvero touchstart, touchmove e touchend. L'evento touchstart viene attivato quando il dito tocca lo schermo. L'evento touchmove viene attivato continuamente quando il dito scorre sulla superficie dello schermo. Durante l'evento, annullare il comportamento predefinito può prevenire lo scorrimento della pagina. L'evento touchend viene attivato quando il dito lascia lo schermo. Oltre alle proprietà comuni degli eventi del mouse, gli oggetti degli eventi di tocco contengono anche le seguenti tre proprietà:

　　　　touches:array di oggetti Touch che rappresentano l'operazione di tocco attuale

　　targetTouches:array di oggetti Touch specifici per l'obiettivo dell'evento

　　changeTouches:array di oggetti Touch che rappresentano cosa è cambiato dal tocco precedente

In questo esempio, è necessario ottenere la posizione del punto di tocco rispetto al viewport, utilizzo event.targetTouches[0].clientX e event.targetTouches[0].clientY

Il codice del modulo ajax del secondo livello

var $ = require('jquery');
var ajax = {
//Ottenere l'elenco iniziale delle immagini trascinabili
getInitImg:function(parent){
var num = 50;
$.ajax({
type:"GET",
async:false,//qui si utilizza il caricamento sincrono, perché è necessario che le immagini siano caricate prima di eseguire altre operazioni
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;//Esportare il modulo ajax

Il codice del modulo position del terzo livello

var $ = require('jquery');
var position = {
//初始化位置，gap是一个表示元素间距的对象
init:function(parent,gap){
var dragElem = parent.children();
//Assicura che l'elemento genitore sia posizionato in modo relativo
if(parent.css('posizione') !== "relativa"){
parent.css('position','relative');
}
parent.css({
'larghezza':'100%'
'z-index':'10'
});
//Larghezza del contenuto della lista corrente
var ListWidth = 0;
//Posizione nella colonna
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//Imposta la posizione iniziale dell'elemento
curEle.css({
posizione:"assoluta",
cima:gap.Y,
sinistra:ListWidth + gap.X
});
//Aggiungi un identificatore unico a ciascun elemento, utile per ripristinare la posizione iniziale
curEle.attr('index',index);
//Salva la posizione iniziale dell'elemento
posizione.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//Imposta l'altezza dell'elemento genitore
parent.height( parseInt(curEle.css('cima')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//Inserisci l'elemento figlio nell'elemento genitore
addTo:function(child,parent,target){
//Coordinate dell'elemento genitore rispetto al viewport
var parentPos = {
X:parent.offset().left,
Y:parent.offset().top
};
//Coordinate della posizione del target rispetto al viewport
var targetPos = {
X:target.offset().left,
Y:target.offset().top
};
//Assicura che l'elemento genitore sia posizionato in modo relativo
if(parent.css('posizione') !== "relativa"){
parent.css({
'posizione':'relativa'
});
}
parent.css({
'z-index':'12'
});
//Inserisci l'elemento figlio nell'elemento genitore
parent.append(child);
//Determina la posizione del figlio nell'elemento genitore e garantisce che la dimensione del figlio non cambi
child.css({
　　　　　　　posizione:assoluta,
cima:targetPos.Y - parentPos.Y,
sinistra:targetPos.X - parentPos.X,
larghezza:target.width(),
height:target.height()}
});
},
//Ripristina l'elemento alla sua posizione originale
restore:function(elem){
//Ottieni l'identificatore dell'elemento
var index = parseInt( elem.attr('index') );
elem.css({
top:position.coord[index].Y,
left:position.coord[index].X
});
},
//Coordinate iniziali dell'elemento di trascinamento
coord:[],
//Determina se l'elemento A si trova all'interno dell'area dell'elemento 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());
}
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;

Codice del modulo drag

var $ = require('jquery');
var position = require('./position.js');
var drag = {
//Id del padre dell'elemento di trascinamento
dragParen:undefined,
//Valore dell'id della console di controllo
control:undefined,
//Posizione del blocco di movimento rispetto al viewport
position:{
X: undefined,
Y: undefined
},
//Posizione del punto di tocco rispetto al viewport, aggiornata durante lo scorrimento
touchPos:{
X: undefined,
Y: undefined
},
//Posizione del punto di tocco rispetto al viewport all'inizio del tocco
startTouchPos:{
X: undefined,
Y: undefined
},
//Posizione del punto di tocco rispetto al blocco di movimento
touchOffsetPos:{
X: undefined,
Y: undefined
},
//获取拖拽元素父元素id和控制台的ID的值
setID: function(dragList, control){
this.dragParent = dragList;
this.control = control;
},
touchStart: function(e){
var target = e.target;
// Blocca la propagazione
e.stopPropagation();
// Blocca lo zoom e lo scorrimento predefiniti del browser
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;
// Blocca la propagazione
e.stopPropagation();
// Blocca lo zoom e lo scorrimento predefiniti del browser
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;
// Blocca la propagazione
e.stopPropagation();
// Blocca lo zoom e lo scorrimento predefiniti del browser
e.preventDefault();
var $target = $(target);
var parent = $target.parent();
// Ottieni il padre dell'elemento console e dell'elenco di trascinamento
var control = $("#" + drag.control);
var dragListPar = $('#' + drag.dragParent);
// Se l'elemento trascinato è nel console
var sitControl = position.isRang(control, dragListPar, $target);
// Dopo il trascinamento, se l'elemento trascinato è il padre dell'elenco di trascinamento
if (parent.attr('id') === drag.dragParent) {
// Se l'elemento è nel console
if (sitControl) {
var dragChild = $target.clone();
// Assegna l'evento touchstart all'elemento clonato
dragChild.unbind('touchstart').on('touchstart',drag.touchStart);
// Inserisci l'elemento clonato nel console
position.addTo(dragChild, control, $target);
}
// Ripristina l'elemento di tocco originale alla posizione iniziale
position.restore($target);
}
// Dopo il trascinamento, se l'elemento trascinato è il padre del console e l'elemento è stato trascinato fuori dal console
if (parent.attr('id') === drag.control && !sitControl) {
$target.remove();
}
}
};
module.exports = drag;

V. Codice del file di ingresso 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');
// Spazi orizzontali e verticali degli elementi trascinabili
var gap = {
X:20,
Y:10
};
// Ottenere la lista degli elementi trascinabili tramite ajax
ajax.getInitImg(dragList);
// Inizializzare la posizione degli elementi trascinabili
position.init(dragList,gap);
// Impostare l'altezza della console. L'altezza della console è l'altezza dello schermo meno l'altezza della lista di trascinamento
var control = $('#control');
control.height($(window).height() - dragList.height());
// Assegnare l'evento touchstart a ciascun elemento trascinabile
var dragElem = dragList.children();
dragElem.each(function(index,elem){
$(elem).unbind('touchstart').on('touchstart',drag.touchStart);
});
// L'id del padre dell'elemento trascinabile è dragList, l'id della console è control
drag.setID('dragList','control');

Sezione 6: compressione webpack

L'idea di programmazione modulare è stata utilizzata qui, con diverse funzionalità implementate in moduli diversi. Se si desidera utilizzare una funzionalità specifica, si può utilizzare require() per importarla. Tuttavia, il browser non ha la definizione del metodo require. Pertanto, il codice sopra non può essere eseguito direttamente nel browser e deve essere prima compresso. Se non sei familiare con webpack, puoi leggere questo articolo, il file di configurazione di webpack è come segue:

var autoHtml = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextWebpack = require('extract-text-webpack-plugin');// Questo plugin può separare i file CSS, rendendo i file CSS situati in file separati
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:"Trascinamento",
filename:"drag.html",
template:'./app/darg.html',
inject:true
}
]
};

Come sopra descritto, l'editor ha introdotto jQuery Mobile Drag & Drop (sviluppo modulare, eventi touch, webpack) agli utenti. Spero che sia utile a tutti. Se avete qualsiasi domanda, lasciate un messaggio, l'editor risponderà tempestivamente. In questo senso, ringrazio anche tutti i sostenitori del sito Web di Yell Call教程！

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito e caricato volontariamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito cancellerà immediatamente il contenuto sospetto di violazione del copyright.