Drag and drop móvel do jQuery (desenvolvimento modular, eventos de toque, webpack)

Pode ser implementado facilmente com jQuery o arrastamento no lado do CP. No entanto, não funciona bem no dispositivo móvel. Portanto, eu escrevi um demo de arrastamento no dispositivo móvel, usando principalmente eventos de toque (touchstart, touchmove e touchend).

A função implementada neste demo é: elementos arrastáveis (aqui são imagens) localizados na lista podem ser arrastados para uma área designada, após chegar na área designada (console), o elemento é inserido no console, o elemento arrastado originalmente retorna à sua posição original, e o novo elemento ainda pode ser arrastado no console e pode ser arrastado fora do console.

Neste demo, há três módulos: módulo ajax, módulo drag e módulo position. O módulo ajax é usado para implementar solicitações ajax (todas as imagens de recursos são obtidas por meio de solicitações ajax), o módulo drag é usado para implementar arrastamento de elementos, e o módulo position é usado para operar a posição dos elementos (como inicialização de posição, recuperação e remoção). O arquivo de entrada do demo é indx.js e os três arquivos de módulo mencionados anteriormente estão armazenados na mesma pasta. Após a codificação, é feito o pacote usando webpack. O código de desenvolvimento está localizado na pasta app e o código pós-pacote está localizado na pasta build.

1. Introdução aos eventos de toque

Os eventos de toque têm três,分别是touchstart，touchmove和touchend。O evento touchstart é acionado quando o dedo toca a tela. O touchmove é acionado continuamente enquanto o dedo desliza na tela. Durante este evento, cancelar o comportamento padrão pode evitar que a página role. O touchend é acionado quando o dedo sai da tela. Além dos atributos comuns dos eventos do mouse, os objetos dos eventos de toque também contêm os seguintes três atributos:

　　　　touches: representa o array de objetos Touch que estão sendo rastreados atualmente.

　　targetTouches: representa o array de objetos Touch específicos para o alvo do evento.

　　changeTouches: representa o array de objetos Touch que ocorreram mudanças desde a última toque.

Neste caso, é necessário obter a posição do ponto de toque em relação ao viewport, uso event.targetTouches[0].clientX e event.targetTouches[0].clientY

o código do módulo AJAX dois

var $ = require('jquery');
var ajax = {
//obter a lista inicial de imagens arrastáveis
getInitImg:function(parent){
var num = 50;
$.ajax({
type:"GET",
async:false,//aqui está sendo utilizado o carregamento síncrono, pois é necessário que as imagens sejam carregadas antes de realizar outras operações
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;//expor o módulo ajax

três. código do módulo position

var $ = require('jquery');
var position = {
//inicializar a posição, gap é um objeto que representa o espaçamento entre elementos
init:function(parent,gap){
var dragElem = parent.children();
//certifique-se de que o elemento pai é alinhado de forma relativa
if(parent.css('position') !== "relative"){
parent.css('position','relative');
}
parent.css({
'width':"100%",
'z-index':'10'}}
});
//largura do conteúdo da lista atual
var ListWidth = 0;
//em qual coluna está localizado
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//definir a posição inicial do elemento
curEle.css({
position:"absolute",
top:gap.Y,
left:ListWidth + gap.X
});
//adicionar um identificador único a cada elemento, útil para restaurar a posição inicial
curEle.attr('index',index);
//salvar a posição inicial do elemento
position.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//definir a altura do elemento pai
parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//inserir o elemento filho no elemento pai
addTo:function(child,parent,target){
//coordenadas do elemento pai na janela de exibição
var parentPos = {
X:parent.offset().left,
Y:parent.offset().top
};
//coordenadas da posição do alvo em relação à janela de exibição
var targetPos = {
X:target.offset().left,
Y:target.offset().top
};
//certifique-se de que o elemento pai é alinhado de forma relativa
if(parent.css('position') !== "relative"){
parent.css({
'position':'relative'
});
}
parent.css({
'z-index':'12'}}
});
//Inserir o elemento filho no elemento pai
parent.append(child);
//Determinar a posição do elemento filho dentro do elemento pai e garantir que o tamanho do elemento filho não mude
child.css({
　　　　　　　position:absolute,
top:targetPos.Y - parentPos.Y,
left:targetPos.X - parentPos.X,
width:target.width(),
height:target.height()
});
},
//Restaurar o elemento para sua posição original
restore:function(elem){
//Obter a identificação do elemento
var index = parseInt( elem.attr('index') );
elem.css({
top:position.coord[index].Y,
left:position.coord[index].X
});
},
//Coordenadas iniciais do elemento arrastado
coord:[],
//Verificar se o elemento A está dentro do intervalo do 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;

Código do módulo drag

var $ = require('jquery');
var position = require('./position.js');
var drag = {
//O ID do pai do elemento arrastado
dragParen:undefined,
//valor do id do painel de controle
control:undefined,
//posição do bloco de arrastar em relação à viewport
position:{
X:undefined,
Y:undefined
},
//posição do ponto de toque em relação à viewport, atualizada continuamente durante a deslize
touchPos:{
X:undefined,
Y:undefined
},
//posição do ponto de toque em relação à viewport no momento do toque inicial
startTouchPos:{
X:undefined,
Y:undefined
},
//posição do ponto de toque em relação ao bloco de arrastar
touchOffsetPos:{
X:undefined,
Y:undefined
},
//obter o valor do id do pai do elemento de arrastar e do id do 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);
//posição do ponto de toque quando o dedo toca a tela
drag.startTouchPos.X = e.targetTouches[0].clientX;
drag.startTouchPos.Y = e.targetTouches[0].clientY;
//posição do elemento de toque em relação à viewport
drag.position.X = $target.offset().left;
drag.position.Y = $target.offset().top;
//posição do ponto de toque em relação à viewport, atualizada continuamente durante a deslize
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//posição do ponto de toque em relação ao elemento de toque
drag.touchOffsetPos.X = drag.touchPos.X - drag.position.X;
drag.touchOffsetPos.Y = drag.touchPos.Y - drag.position.Y;
//ligar o evento touchMove ao elemento alvo
$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);
//obter a posição do ponto de toque
drag.touchPos.X = e.targetTouches[0].clientX;
drag.touchPos.Y = e.targetTouches[0].clientY;
//modificar a posição do bloco de arrastar
$target.offset({
topo: drag.touchPos.Y - drag.touchOffsetPos.Y,
esquerda: drag.touchPos.X - drag.touchOffsetPos.X
});
//Bind 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 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');
//Espaçamento horizontal e vertical dos elementos arrastáveis
var gap = {
X:20,
Y:10
};
//Obter a lista de elementos arrastáveis através de ajax
ajax.getInitImg(dragList);
//Inicializar a posição do elemento arrastável
position.init(dragList,gap);
//Definir a altura da consola. A altura da consola é a altura da tela menos a altura da lista de arrastamento
var control = $('#control');
control.height( $(window).height() - dragList.height() );
//Associar o evento touchstart a cada elemento arrastável
var dragElem = dragList.children();
dragElem.each(function(index,elem){
$(elem).unbind('touchstart').on('touchstart',drag.touchStart);
});
//O valor do id do pai do elemento arrastável é dragList, e o valor do id da consola é control
drag.setID('dragList','control');

Seis. Empacotamento webpack

O código acima utiliza a ideia de programação modular, implementando diferentes funcionalidades em módulos diferentes. Você pode usar require() para importar o que precisar, mas o navegador não define o método require. Portanto, o código acima não pode ser executado diretamente no navegador e precisa ser empacotado primeiro. Se você ainda não está familiarizado com o webpack, você pode consultar este artigo. O arquivo de configuração do webpack é o seguinte:

var autoHtml = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextWebpack = require('extract-text-webpack-plugin');// Este plugin pode separar arquivos CSS, colocando os arquivos CSS em arquivos 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:"arrastar",
filename:"drag.html",
template:'./app/darg.html',
inject:true
}
]
};

O que foi mencionado acima é o que o editor apresentou aos amigos sobre o arrastamento móvel jQuery (desenvolvimento modular, eventos de toque, webpack), esperando que ajude a todos. Se você tiver alguma dúvida, por favor, deixe um comentário, o editor responderá a todos o mais rápido possível. Agradecemos também o apoio da comunidade ao site de tutorial de clamor!

Declaração: O conteúdo deste artigo é de propriedade da Internet, pertence ao respectivo proprietário, o conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w3Declaração: O conteúdo deste artigo foi extraído da Internet, pertence ao respectivo proprietário, o conteúdo foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w