Desplazamiento en móviles con jQuery (desarrollo modular, eventos de toque, webpack)

Se puede implementar fácilmente el arrastre en el extremo CP utilizando jQuery. Sin embargo, no funciona bien en el extremo móvil. Por lo tanto, escribí yo mismo un demo de arrastre en el extremo móvil, utilizando principalmente eventos de toque (touchstart, touchmove y touchend).

La función implementada por este demo es: los elementos arrastrables (en este caso, las imágenes) se encuentran en una lista y estos elementos pueden ser arrastrados a una área designada. Después de llegar a la área designada (consola), el elemento se inserta en la consola y el elemento arrastrado original regresa a su posición original, el nuevo elemento sigue siendo arrastrable en la consola y también puede ser arrastrado fuera de la consola.

En este demo, se utilizan tres módulos: el módulo AJAX, el módulo drag y el módulo position. El módulo AJAX se utiliza para realizar solicitudes AJAX (por lo que todos los recursos de imágenes se obtienen a través de solicitudes AJAX), el módulo drag se utiliza para implementar el arrastre de elementos y el módulo position se utiliza para realizar operaciones de posición de elementos (como inicialización de posición, restauración y eliminación). El archivo de entrada del demo es indx.js y los tres archivos de módulos anteriores se almacenan en la misma carpeta. Después de completar la codificación, se utiliza webpack para empaquetar. El código de desarrollo se encuentra en la carpeta app y el código empaquetado se encuentra en la carpeta build.

I. Introducción a los eventos de toque

Los eventos de toque tienen tres, que son touchstart, touchmove y touchend. El evento touchstart se desencadena cuando los dedos tocan la pantalla. touchmove se dispara continuamente cuando los dedos se deslizan sobre la pantalla. Durante este evento, cancelar su comportamiento por defecto puede evitar que la página se desplace. touchend se desencadena cuando los dedos se apartan de la pantalla. Además de las propiedades comunes de los eventos de ratón, los objetos de eventos de estos tres eventos de toque también contienen las siguientes tres propiedades:

　　　　touches: es un array de objetos Touch que representan las operaciones de toque actuales.

　　targetTouches: es un array de objetos Touch específicos del objetivo del evento.

　　changeTouches: es un array de objetos Touch que indica lo que ha cambiado desde la última vez que se produjo un toque.

En este caso, se necesita obtener la posición del punto de toque en relación con la ventana de visualización, utilizo event.targetTouches[0].clientX y event.targetTouches[0].clientY

Código del módulo AJAX

var $ = require('jquery');
var ajax = {
//Obtener la lista inicial de imágenes arrastrables
getInitImg: function(parent) {
var num = 50;
$.ajax({
type: "GET",
async: false,//Se utiliza la carga sincrónica porque se necesita que las imágenes se carguen antes de poder realizar otras operaciones
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;//Expone el módulo ajax

Tres. Código del módulo position

var $ = require('jquery');
var position = {
//Inicializar la posición, gap es un objeto que representa el espacio entre elementos
init:function(parent,gap){
var dragElem = parent.children();
//asegúrese de que el elemento padre esté ubicado en posición relativa
if(parent.css('position') !== "relative"){
parent.css('position','relative');
}
parent.css({
'width':"100%",
'z-index':'10'}}
});
//Ancho actual del contenido de la lista
var ListWidth = 0;
//Ubicado en qué columna
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//Establecer la posición inicial del elemento
curEle.css({
position:"absolute",
top:gap.Y,
left:ListWidth + gap.X
});
//Agregar una identificación única a cada elemento, útil para restaurar la posición inicial
curEle.attr('index',index);
//Guardar la posición inicial del elemento
position.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//Establecer la altura del elemento padre
parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//Insertar el elemento hijo dentro del elemento padre
addTo:function(child,parent,target){
//Las coordenadas del elemento padre en la ventana del navegador
var parentPos = {
X:parent.offset().left,
Y:parent.offset().top
};
//Las coordenadas del objetivo en relación con la ventana del navegador
var targetPos = {
X:target.offset().left,
Y:target.offset().top
};
//asegúrese de que el elemento padre esté ubicado en posición relativa
if(parent.css('position') !== "relative"){
parent.css({
'position':'relative'
});
}
parent.css({
'z-index':'12'}}
});
//insertar el elemento hijo dentro del elemento padre
parent.append(child);
//determinar la posición del elemento hijo dentro del elemento padre y garantizar que el tamaño del elemento hijo no cambie
child.css({
　　　　　　　position:absolute,
top:targetPos.Y - parentPos.Y,
left:targetPos.X - parentPos.X,
width:target.width(),
height:target.height()
});
},
//restaurar el elemento a su posición original
restore:function(elem){
//obtener la identificación del elemento
var index = parseInt( elem.attr('index') );
elem.css({
top:position.coord[index].Y,
left:position.coord[index].X
});
},
//coordenadas iniciales del elemento arrastrado
coord:[],
//juzgar si el elemento A está dentro del rango del 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());
}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;

cuatro. Código del módulo drag

var $ = require('jquery');
var position = require('./position.js');
var drag = {
//el ID del padre del elemento arrastrado
dragParen:undefined,
//el valor del id de la consola de operaciones
control:undefined,
//la posición del bloque de desplazamiento con respecto a la ventana de visualización
position:{
X:undefined,
Y:undefined
},
//la posición del punto de toque con respecto a la ventana de visualización, actualizada constantemente durante el deslizamiento
touchPos:{
X:undefined,
Y:undefined
},
//la posición del punto de toque con respecto a la ventana de visualización al comenzar a tocar
startTouchPos:{
X:undefined,
Y:undefined
},
//la posición del punto de toque con respecto al bloque de desplazamiento
touchOffsetPos:{
X:undefined,
Y:undefined
},
//obtener el valor del id del elemento de arrastre del padre y el id del control de consola
setID:function(dragList,control){
this.dragParent = dragList;
this.control = control;
},
touchStart:function(e){
var target = e.target;
//Prevenir la propagación
e.stopPropagation();
//Prevenir el zoom y el desplazamiento predeterminados del navegador
e.preventDefault();
var $target = $(target);
//la posición del punto de toque cuando el dedo toca la pantalla por primera vez
drag.startTouchPos.X = e.targetTouches[0].clientX;
drag.startTouchPos.Y = e.targetTouches[0].clientY;
//la posición del elemento de toque con respecto a la ventana de visualización
drag.position.X = $target.offset().left;
drag.position.Y = $target.offset().top;
//la posición del punto de toque con respecto a la ventana de visualización, actualizada constantemente durante el deslizamiento
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//la posición del punto de toque con respecto al elemento de toque
drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X;
drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y;
//asignar el evento touchMove al elemento de destino
$target.unbind('touchmove').on('touchmove',drag.touchMove);
},
touchMove:function(e){
var target = e.target;
//Prevenir la propagación
e.stopPropagation();
//Prevenir el zoom y el desplazamiento predeterminados del navegador
e.preventDefault();
var $target = $(target);
//obtener la posición del punto de toque
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//modificar la posición del bloque de desplazamiento
$target.offset({
arriba: drag.touchPos.Y - drag.touchOffsetPos.Y,
izquierda: drag.touchPos.X - drag.touchOffsetPos.X
});
//Asignar el evento touchend al elemento de movimiento
$target.unbind('touchend').on('touchend',drag.touchEnd);
},
touchEnd:function(e) {
var target = e.target;
//Prevenir la propagación
e.stopPropagation();
//Prevenir el zoom y el desplazamiento predeterminados del navegador
e.preventDefault();
var $target = $(target);
var parent = $target.parent();
//Obtener el elemento padre de la consola y la lista de arrastre arrastrada
var control = $("#" + drag.control);
var dragListPar = $('#' + drag.dragParent);
//¿Está el elemento arrastrado en la consola?
var sitControl = position.isRang(control, dragListPar, $target);
//Después de soltar el arrastre, si el elemento arrastrado es la lista de arrastre
if (parent.attr('id') === drag.dragParent) {
//Si el elemento está en la consola
if (sitControl) {
var dragChild = $target.clone();
//Asignar el evento touchstart al elemento clonado
dragChild.unbind('touchstart').on('touchstart',drag.touchStart);
//Insertar el elemento clonado en la consola
position.addTo(dragChild, control, $target);
}
//Restaurar el elemento táctil original a su posición inicial
position.restore($target);
}
// Después de soltar el arrastre, si el elemento arrastrado es el elemento padre de la consola y el elemento se desplazó fuera de la consola
if (parent.attr('id') === drag.control && !sitControl) {
$target.remove();
}
}
};
module.exports = drag;

Cinco. Código del archivo de entrada 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');
//El espacio horizontal y vertical entre los elementos arrastrables
var gap = {
X:20,
Y:10
};
//Obtener la lista de elementos arrastrables a través de ajax
ajax.getInitImg(dragList);
//Inicializar la posición de los elementos arrastrables
position.init(dragList,gap);
//Establecer la altura del panel de control. La altura del panel de control es la altura de la pantalla menos la altura del listado arrastrable
var control = $('#control');
control.height( $(window).height() - dragList.height() );
//Asignar el evento touchstart a cada elemento arrastrable
var dragElem = dragList.children();
dragElem.each(function(index,elem){
$(elem).unbind('touchstart').on('touchstart',drag.touchStart);
});
//El id del elemento padre del elemento arrastrable es dragList, y el id del panel de operaciones es control
drag.setID('dragList','control');

Seis: paqueteo de webpack

Se ha utilizado la idea de programación modular, escribiendo diferentes implementaciones de funcionalidades en diferentes módulos, y se puede utilizar require() para importar lo que se necesite. Sin embargo, el navegador no tiene definida la función require. Por lo tanto, el código anterior no se puede ejecutar directamente en el navegador y debe ser paqueteado primero. Si no estás familiarizado con webpack, puedes ver este artículo. El archivo de configuración de webpack es el siguiente:

var autoHtml = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextWebpack = require('extract-texto-webpack-plugin');// esta extensión puede separar archivos css, permitiendo que los archivos css se encuentren en archivos separados
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:"Arrastrar y soltar",
filename:"drag.html",
template:'./app/darg.html',
inject:true
}
]
};

Lo que se ha mencionado anteriormente es lo que el editor ha presentado a todos los amigos sobre la función de arrastrar y soltar en el terminal de jQuery (desarrollo modular, eventos táctiles, webpack), esperamos que sea útil para todos. Si tienen alguna pregunta, dejen un mensaje y el editor les responderá a tiempo. También les agradezco mucho el apoyo a la página web de la tutorial de grito en este momento!

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha cargado por los usuarios de Internet de manera autónoma, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w3Aviso: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha cargado por los usuarios de Internet de manera autónoma, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w