jQuery мобильное перетаскивание (модульное развитие, сенсорные события, webpack)

С помощью jQuery легко реализовать перетаскивание на стороне клиента. Но на мобильных устройствах это не так эффективно. Поэтому я сам написал demo для мобильных устройств, который использует события касания (touchstart, touchmove и touchend).

Функциональность, которую реализует этот demo: элементы, которые можно перетаскивать (в данном случае это изображения), расположены в списке, эти элементы можно перетащить в указанную область. После достижения указанной области (консоль), элемент вставляется в консоль, исходный элемент возвращается на прежнее место, новый элемент по-прежнему можно перетаскивать в консоли и выводить из нее.

В этом demo используется три модуля: модуль ajax, модуль drag и модуль position. Модуль ajax используется для реализации запросов ajax (все изображения получены через запросы ajax), модуль drag используется для реализации перетаскивания элементов, модуль position используется для управления положением элементов (например, инициализация положения, восстановление, удаление). Входным файлом demo является indx.js, и три модуля хранятся в одной папке. После завершения кодирования используется webpack для打包. Разработанный код находится в папке app, а打包ленный код находится в папке build.

1. Введение в события касания

События касания имеют три типа: touchstart, touchmove и touchend. Событие touchstart запускается при касании экрана. Событие touchmove запускается при скольжении пальца по экрану. В этот период можно отменить его defaultManager, чтобы предотвратить прокрутку страницы. Событие touchend запускается при отрыве пальца от экрана. Эти три события касания, кроме свойств, общих для событий мыши, также включают следующие три свойства:

　　　　touches: массив объектов Touch, представляющих текущие отслеживаемые действия касания

　　targetTouches: массив объектов Touch, связанных с целевым объектом события

　　changeTouches: массив объектов Touch, которые изменились с последнего касания

В этом примере необходимо получить положение точки касания относительно окна просмотра, я использую event.targetTouches[0].clientX и event.targetTouches[0].clientY

Два. Код модуля ajax

var $ = require('jquery');
var ajax = {
//получаем начальный список изображений для перетаскивания
getInitImg:function(parent){
var num = 50;
$.ajax({
type:"GET",
async:false,//здесь используется синхронная загрузка, так как необходимо, чтобы изображения были загружены, чтобы можно было выполнить другие действия
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;//Экспортируем модуль ajax

Три. Код модуля position

var $ = require('jquery');
var position = {
//初始化位置，gap是一个表示元素间距的对象
init:function(parent,gap){
var dragElem = parent.children();
//Убедиться, что элемент-родитель является относительным положением
if(parent.css('положение') !== "относительное"){
parent.css('position','relative');
}
parent.css({
'ширина':'100%'
'z-index':'10'
});
//Ширина текущего списка содержимого
var ListWidth = 0;
//Находится в колонке номер
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//Установить начальное положение элемента
curEle.css({
положение:"абсолютное",
верх:gap.Y,
лев:ListWidth + gap.X
});
//Добавить уникальный идентификатор каждому элементу, который используется для восстановления начального положения
curEle.attr('index',index);
//Сохранить начальное положение элемента
position.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//Установить высоту элемента-родителя
parent.height( parseInt(curEle.css('верх')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//Вставить подэлемент в элемент-родитель
addTo:function(child,parent,target){
//Положение элемента-родителя относительно координаты видоэлемента
var parentPos = {
X:parent.offset().left,
Y:parent.offset().top
};
//Положение目标是 относительно координаты видоэлемента
var targetPos = {
X:target.offset().left,
Y:target.offset().top
};
//Убедиться, что элемент-родитель является относительным положением
if(parent.css('положение') !== "относительное"){
parent.css({
'положение':'относительное'
});
}
parent.css({
'z-index':'12'
});
//Вставить подэлемент в элемент-родитель
parent.append(child);
//Определить положение подэлемента в элементе-родителе и обеспечить неизменность размера подэлемента
child.css({
　　　　　　　положение:абсолютное,
верх:targetPos.Y - parentPos.Y,
лев:targetPos.X - parentPos.X,
ширина:target.width(),
height:target.height()
});
},
//восстановление элемента в исходное положение
restore:function(elem){
//получение идентификатора элемента
var index = parseInt( elem.attr('index') );
elem.css({
top:position.coord[index].Y,
left:position.coord[index].X
});
},
//начальные координаты элемента для перетаскивания
coord:[],
//определение того, находится ли элемент A в диапазоне элемента B
isRang:function(control,dragListPar,$target){
var isSituate = undefined;
если (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;

четыре. код модуля drag

var $ = require('jquery');
var position = require('./position.js');
var drag = {
//拖拽元素的父元素的id
dragParen:undefined,
//操作台的id值
control:undefined,
//移动块相对视口的位置
position:{
X: undefined,
Y: undefined
},
//触摸点相对视口的位置，在滑动过程中会不断更新
touchPos:{
X: undefined,
Y: undefined
},
//开始触摸时触摸点相对视口的位置
startTouchPos:{
X: undefined,
Y: undefined
},
//触摸点相对于移动块的位置
touchOffsetPos:{
X: undefined,
Y: undefined
},
//获取拖拽元素父元素id和控制台的ID的值
setID: function(dragList, control){
this.dragParent = dragList;
this.control = control;
},
touchStart: function(e){
var target = e.target;
// Предотвратить переброс
e.stopPropagation();
// Предотвратить стандартное масштабирование и скроллинг браузера
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;
// Предотвратить переброс
e.stopPropagation();
// Предотвратить стандартное масштабирование и скроллинг браузера
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;
// Предотвратить переброс
e.stopPropagation();
// Предотвратить стандартное масштабирование и скроллинг браузера
e.preventDefault();
var $target = $(target);
var parent = $target.parent();
// Получить родительский элемент консоли и списка перетаскивания
var control = $("#" + drag.control);
var dragListPar = $('#' + drag.dragParent);
// Перетаскиваемый элемент находится ли в консоли
var sitControl = position.isRang(control, dragListPar, $target);
// По завершении перетаскивания, если родительский элемент перетаскиваемого элемента является списком перетаскивания
if (parent.attr('id') === drag.dragParent) {
// Если элемент находится в консоли
if (sitControl) {
var dragChild = $target.clone();
// Привязать событие touchstart к клонированному элементу
dragChild.unbind('touchstart').on('touchstart',drag.touchStart);
// Вставить клонированный элемент в консоль
position.addTo(dragChild, control, $target);
}
// Восстановить исходное положение оригинального элемента касания
position.restore($target);
}
// По завершении перетаскивания, если родительский элемент перетаскиваемого элемента является консолью и элемент вытащен за пределы консоли
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');
//Горизонтальное и вертикальное расстояние между элементами для перетаскивания
var gap = {
X:20,
Y:10
};
//Получить список элементов для перетаскивания через ajax
ajax.getInitImg(dragList);
//Инициализировать положение элементов для перетаскивания
position.init(dragList,gap);
//Установить высоту консоли. Высота консоли равна высоте экрана минус высота списка для перетаскивания
var control = $('#control');
control.height($(window).height() - dragList.height());
//Привязать событие touchstart к каждому элементу для перетаскивания
var dragElem = dragList.children();
dragElem.each(function(index,elem){
$(elem).unbind('touchstart').on('touchstart',drag.touchStart);
});
//ID родителя элемента для перетаскивания равен dragList, ID панели управления равен control
drag.setID('dragList','control');

Шестой. Пакетирование webpack

Верхний код использует идею модульной программирования, реализуя различные функции в различных модулях. Если нужно использовать определенную функцию, можно использовать require(). Однако браузер не имеет определения метода require. Поэтому вышеуказанный код не может напрямую выполняться в браузере, и его нужно сначала打包. Если вы еще не знакомы с webpack, вы можете ознакомиться с этой статьей. Конфигурационный файл webpack выглядит следующим образом:

var autoHtml = require('html-webpack-plugin');
var webpack = require('webpack');
var extractTextWebpack = require('extract-text-webpack-plugin');// Этот плагин может отделить файлы css, чтобы они находились в отдельных файлах
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:"Перетаскивание",
filename:"drag.html",
template:'./app/darg.html',
inject:true
}
]
};

Указанные выше являются примерами, которые я представляю вам о jQuery для мобильных устройств (модульное разработка, сенсорные события, webpack), я надеюсь, что они помогут вам. Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий, и я отвечу вам своевременно. Вновь благодарю всех за поддержку сайта呐喊 руководств!

Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, материалы предоставлены пользователями Интернета, сайт не имеет права собственности, не был отредактирован вручную, и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите подозрительное нарушение авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении факта нарушения сайт немедленно удаляет подозрительное нарушение авторских прав.