تقنية jQuery للسحب على الجهاز المحمول (التصميم بشكل جزئي، أحداث اللمس، webpack)

يمكن تنفيذ سحب CP بسهولة باستخدام jQuery. ولكن في الجهاز المحمول، لا يكون ذلك مفيدًا. لذلك، قمت أنا بإنشاء مثال على السحب في الجهاز المحمول، حيث يتم استخدام أحداث اللمس (touchstart،touchmove وtouchend) بشكل رئيسي.

يتم تنفيذ وظيفة هذا المثال وهي: يمكن سحب العناصر (في هذا المثال صور) من القائمة، ويمكن سحب هذه العناصر إلى منطقة معينة، عند وصول العناصر إلى المنطقة المحددة (الشاشة التشغيلية)، يتم إدراج العناصر في الشاشة التشغيلية، العناصر التي تم سحبها تعود إلى موقعهما الأصلي، العناصر الجديدة يمكنها السحب داخل الشاشة التشغيلية، ويمكنها الخروج منها أيضًا.

في هذا المثال، يتم استخدام ثلاثة وحدات، وهي وحدة AJAX، وحدة السحب، ووحدة الموقع. وحدة AJAX تستخدم لتنفيذ طلبات AJAX (تم الحصول على جميع الموارد الصور عبر طلبات AJAX)، ووحدة السحب تستخدم لتنفيذ سحب العناصر، ووحدة الموقع تستخدم لتنفيذ عمليات تحريك العناصر (مثل تحريك العناصر، استعادة العناصر، إزالة العناصر). ملف الدخول للمثال هو ملف indx.js، وثلاثة ملفات الوحدات الثلاثة موجودة في نفس المجلد. بعد إكمال الت编码، يتم تضمينها باستخدام webpack. يتم تخزين الكود المطور في مجلد app، وتخزين الكود المضغوط في مجلد build.

التعريف لأحداث اللمس

هناك ثلاثة أنواع من أحداث اللمس، وهي touchstart،touchmove وtouchend. يُطلق أحداث touchstart عند لمس الشاشة. يُطلق أحداث touchmove بشكل مستمر عند سحب الإصبع على الشاشة. يمكن إلغاء التفعيل الافتراضي لهذا الحدث أثناء حدوثه، مما يمنع تمرير الصفحة. يُطلق أحداث 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('position') !== "relative"){
parent.css('position','relative');
}
parent.css({
'width':'100%'
'z-index':'10'
});
//عرض المحتوى الحالي للقائمة
var ListWidth = 0;
//الموقع في العمود
var j = 0;
dragElem.each(function(index,elem){
var curEle = $(elem);
//ضبط موقع العنصر الأساسي
curEle.css({
position:"absolute",
top:gap.Y,
left:ListWidth + gap.X
});
//إضافة وسم فريد لكل عنصر لاستخدامه في استعادة الموقع الأساسي
curEle.attr('index',index);
//حفظ موقع العنصر الأساسي
position.coord.push({
X:ListWidth + gap.X,
Y:gap.Y
});
j++;
//ضبط ارتفاع العنصر الأب
parent.height( parseInt(curEle.css('top')) + curEle.height() + gap.Y);
ListWidth = curEle.offset().left + curEle.width();
});
},
//إدراج العنصر التابع في العنصر الأب
addTo:function(child,parent,target){
//موقع العنصر الأب في الشاشة
var parentPos = {
X:العرض.النقطة.الخطية.الآب.,
Y:العرض.النقطة.العمودية.الآب.
};
//موقع الهدف بالنسبة للشاشة
var targetPos = {
X:العرض.النقطة.الخطية.السيارة.,
Y:العرض.النقطة.العمودية.السيارة.
};
//تأكد من أن العنصر الأب هو تحديد مطلق
if(parent.css('position') !== "relative"){
parent.css({
'position':'relative'
});
}
parent.css({
'z-index':'12'
});
//إدراج العنصر التابع في العنصر الأب
parent.append(child);
//تحديد موقع العنصر التابع في العنصر الأب وضمان عدم تغيير حجم العنصر التابع
child.css({
　　　　　　　position:absolute,
top:الموقع.الصغير.Y - الموقع.الكبير.Y,
left:الموقع.الصغير.X - الموقع.الكبير.X,
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:[],
//�断 العنصر ألف إذا كان في نطاق العنصر ب
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;

أربعة.كود مودول 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 إلى ملفات منفردة، حيث تكون ملفات 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 Mobile Drag (development modular، events touch، webpack)، نأمل أن يكون مفيدًا للجميع، إذا كان لديك أي أسئلة، فالرجاء ترك تعليق، وسأقوم بالرد على الجميع في الوقت المناسب. شكرًا جزيلاً أيضًا للحصول على دعم موقع呐喊 التعليمي!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع صاحب الحقوق بالملكية، ويتم جمع المحتوى من قبل المستخدمين على الإنترنت بشكل تلقائي، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت أي محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال # ب @ عند إرسال البريد الإلكتروني) للإبلاغ، وقدم الدليل على الدليل، وسيتم حذف المحتوى المزعوم المزعوم فورًا.