Glisser-déposer mobile avec jQuery (développement modulaire, événements de toucher, webpack)

Il est facile de réaliser le glisser-déposer sur le côté client avec jQuery. Cependant, cela ne fonctionne pas bien sur le côté mobile. Alors, j'ai écrit un demo de glisser-déposer sur le côté mobile moi-même, utilisant principalement les événements de toucher (touchstart, touchmove et touchend).

La fonctionnalité réalisée par ce demo est : les éléments glissables (ici des images) situés dans la liste peuvent être glissés dans une zone spécifiée, et une fois qu'ils atteignent la zone spécifiée (console), les éléments sont insérés dans la console. L'élément glissé d'origine retourne à sa position d'origine, et le nouvel élément peut toujours être glissé dans la console et sorti de la console.

Dans ce demo, il y a trois modules, à savoir le module ajax, le module drag et le module position. Le module ajax est utilisé pour effectuer des requêtes AJAX (tous les ressources d'images sont obtenues par des requêtes AJAX), le module drag est utilisé pour réaliser le glisser-déposer des éléments, et le module position est utilisé pour gérer les opérations de position des éléments (comme l'initialisation de position, la restauration et la suppression). Le fichier d'entrée du demo est indx.js et les trois fichiers de modules précédents sont stockés dans le même dossier. Après la codage, il est打包 par webpack. Le code de développement est situé dans le dossier app, et le code打包 après est situé dans le dossier build.

I. Introduction aux événements de toucher

Les événements de toucher ont trois types, à savoir touchstart, touchmove et touchend. Le événement touchstart est déclenché lorsque le doigt touche l'écran. touchmove est déclenché en continu lorsque le doigt glisse sur l'écran. Pendant cet événement, annuler le comportement par défaut peut empêcher le défilement de la page. touchend est déclenché lorsque le doigt quitte l'écran. Les objets événement des trois événements de toucher, en plus des attributs courants des événements de souris, contiennent également les trois attributs suivants :

　　　　touches : représente l'array des objets Touch du geste de toucher en cours

　　targetTouches : représente l'array des objets Touch spécifiques à l'élément cible

　　changeTouches : représente l'array des objets Touch qui ont été modifiés depuis la dernière touche

Dans cet exemple, il faut obtenir la position relative du point de contact par rapport à la fenêtre de visualisation, j'utilise event.targetTouches[0].clientX et event.targetTouches[0].clientY

deux, le code du module AJAX

var $ = require('jquery');
var ajax = {
//obtenir la liste initiale des images glissables
getInitImg: function(parent) {
var num = 50;
$.ajax({
type: "GET",
async: false,//ici, nous utilisons le chargement synchrone, car nous devons attendre que les images soient chargées avant de faire d'autres opérations
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;//exposer le module ajax

Troisième code du module position

var $ = require('jquery');
var position = {
//initialiser la position, gap est un objet représentant l'intervalle des éléments
init:function(parent,gap){
var dragElem = parent.children();
//s'assurer que l'élément parent est en position relative
if(parent.css('position') !== "relative"){
parent.css('position','relative');
}
parent.css({
'width':"100%",
'z-index':'10'''
});
//largeur actuelle du contenu de la liste
var ListWidth = 0;
//position dans quelle colonne
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//définir la position initiale de l'élément
curEle.css({
position:"absolute",
top:gap.Y,
left:ListWidth + gap.X
});
//ajouter une identité unique à chaque élément, utile pour restaurer la position initiale
curEle.attr('index',index);
//enregistrer la position initiale de l'élément
position.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//définir la hauteur de l'élément parent
parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//insérer l'élément enfant dans l'élément parent
addTo:function(child,parent,target){
//coordonnées de l'élément parent dans la fenêtre
var parentPos = {
X:parent.offset().left,
Y:parent.offset().top
};
//coordonnées de la position cible par rapport à la fenêtre
var targetPos = {
X:target.offset().left,
Y:target.offset().top
};
//s'assurer que l'élément parent est en position relative
if(parent.css('position') !== "relative"){
parent.css({
'position':'relative'
});
}
parent.css({
'z-index':'12'''
});
//Insérer l'élément enfant dans l'élément parent
parent.append(child);
//Déterminer la position de l'élément enfant dans l'élément parent et garantir que la taille de l'élément enfant reste inchangée
child.css({
　　　　　　　position:absolute,
top:targetPos.Y - parentPos.Y,
left:targetPos.X - parentPos.X,
width:target.width(),
height:target.height()
});
},
//Restaurer l'élément à sa position d'origine
restore:function(elem){
//Obtenez l'identifiant de l'élément
var index = parseInt( elem.attr('index') );
elem.css({
top:position.coord[index].Y,
left:position.coord[index].X
});
},
//Les coordonnées initiales de l'élément glissé
coord:[],
//Vérifiez si l'élément A est dans la portée de l'élément 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;

Le code du module four.drag

var $ = require('jquery');
var position = require('./position.js');
var drag = {
//l'ID du parent de l'élément glissé
dragParen:undefined,
//the ID value of the operation console
control:undefined,
//the position of the moving block relative to the viewport
position:{
X:undefined,
Y:undefined
},
//the position of the touch point relative to the viewport, updated continuously during the slide
touchPos:{
X:undefined,
Y:undefined
},
//the position of the touch point relative to the viewport at the time of the initial touch
startTouchPos:{
X:undefined,
Y:undefined
},
//the position of the touch point relative to the moving block
touchOffsetPos:{
X:undefined,
Y:undefined
},
//get the id value of the parent element of the dragging element and the ID value of the console
setID:function(dragList,control){
this.dragParent = dragList;
this.control = control;
},
touchStart:function(e){
var target = e.target;
//Prevent bubble
e.stopPropagation();
//Prevent the browser's default zoom and scroll
e.preventDefault();
var $target = $(target);
//the position of the touch point when the finger just touches the screen
drag.startTouchPos.X = e.targetTouches[0].clientX;
drag.startTouchPos.Y = e.targetTouches[0].clientY;
//the position of the touch element relative to the viewport
drag.position.X = $target.offset().left;
drag.position.Y = $target.offset().top;
//the position of the touch point relative to the viewport, updated continuously during the slide
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//the position of the touch point relative to the touch element
drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X;
drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y;
//bind the touchMove event to the target element
$target.unbind('touchmove').on('touchmove',drag.touchMove);
},
touchMove:function(e){
var target = e.target;
//Prevent bubble
e.stopPropagation();
//Prevent the browser's default zoom and scroll
e.preventDefault();
var $target = $(target);
//obtain the position of the touch point
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//modifier the position of the moving block
$target.offset({
top: drag.touchPos.Y - drag.touchOffsetPos.Y,
left: drag.touchPos.X - drag.touchOffsetPos.X
});
//Bind the touchend event to the moving element
$target.unbind('touchend').on('touchend',drag.touchEnd);
},
touchEnd:function(e) {
var target = e.target;
//Prevent bubble
e.stopPropagation();
//Prevent the browser's default zoom and scroll
e.preventDefault();
var $target = $(target);
var parent = $target.parent();
//Get the parent element of the console and the drag element list
var control = $("#" + drag.control);
var dragListPar = $('#' + drag.dragParent);
//Whether the dragging element is located in the console
var sitControl = position.isRang(control, dragListPar, $target);
//After dragging, if the parent element of the dragged element is the drag list
if (parent.attr('id') === drag.dragParent) {
//If the element is located in the console
if (sitControl) {
var dragChild = $target.clone();
//Bind the touchstart event to the cloned element
dragChild.unbind('touchstart').on('touchstart',drag.touchStart);
//Insert the cloned element into the console
position.addTo(dragChild, control, $target);
}
//Restore the original touch element to its initial position
position.restore($target);
}
// After dragging, if the parent element of the dragged element is the console and the element is dragged out of the console
if (parent.attr('id') === drag.control && !sitControl) {
$target.remove();
}
}
};
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');
//L'espacement horizontal et vertical des éléments glissants
var gap = {
X:20,
Y:10
};
//Obtenir la liste des éléments glissants via ajax
ajax.getInitImg(dragList);
//Initialiser la position de l'élément glissant
position.init(dragList,gap);
//Définir la hauteur de la console. La hauteur de la console est la hauteur de l'écran moins la hauteur de la liste de glissement
var control = $('#control');
control.height( $(window).height() - dragList.height() );
//Liens d'événement touchstart pour chaque élément glissant
var dragElem = dragList.children();
dragElem.each(function(index,elem){
$(elem).unbind('touchstart').on('touchstart',drag.touchStart);
});
//L'ID du parent de l'élément glissant est dragList, et l'ID de la console est control
drag.setID('dragList','control');

Six. Assemblage webpack

L'idée de programmation modulaire est utilisée ici, en plaçant l'implémentation des différentes fonctionnalités dans des modules différents. Vous pouvez utiliser require() pour importer la fonctionnalité dont vous avez besoin. Cependant, le navigateur n'a pas de définition de la méthode require. Par conséquent, le code ci-dessus ne peut pas être exécuté directement dans le navigateur et doit être assemblé d'abord. Si vous n'êtes pas familier avec webpack, vous pouvez consulter cet article. Le fichier de configuration de webpack est le suivant :

var autoHtml = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextWebpack = require('extract-text-webpack-plugin');// Cette extension peut séparer les fichiers CSS, de sorte que les fichiers CSS soient situés dans des fichiers séparés
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:"Glisser-déposer",
filename:"drag.html",
template:'./app/darg.html',
inject:true
}
]
};

Ce que j'ai mentionné ci-dessus est le tutoriel jQuery mobile drag and drop (développement modulaire, événements de toucher, webpack) que j'ai présenté aux utilisateurs. J'espère que cela vous sera utile. Si vous avez des questions, n'hésitez pas à laisser un message, je vous répondrai à temps. Je tiens également à remercier chaleureusement les utilisateurs pour leur soutien au site Web des tutoriels de cri.

Déclaration : Le contenu de cet article est extrait du réseau, propriété de l'auteur original, mis en ligne par les utilisateurs d'Internet de manière volontaire. Ce site n'en possède pas la propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu susceptible de violer les droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (Lorsque vous envoyez un e-mail, veuillez remplacer # par @ pour signaler un abus, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)