مع تغيرات العصر، أصبح الشعور بأهمية Js أمرًا متزايدًا، حيث لا يقتصر الأمر على إنشاء صفحات الويب (مثل إطار Ext)، ولكن أيضًا إنشاء بعض التأثيرات الخاصة على الويب. هذه التأثيرات الخاصة ليست متوافقة فقط مع أجهزة الكمبيوتر، ولكنها متوافقة أيضًا مع الهواتف المحمولة، فهي تعتمد على المتصفح ولا علاقة لها بالمنصة. يمكن الآن تطوير تطبيقات نظام Windows 8 من Microsoft باستخدام js، إذا كان لديك الوقت، يمكنك تجربتها.
الآن دعنا نصل إلى النقطة ونتحدث عن كيفية تنفيذ Div القابل للسحب في js لتحقيق هذه الوظيفة، فلنتحدث أولاً عن الفكرة:
1. قم بالتقاط حدث mousedown لقسم الماوس
2. قم بالتقاط حدث تحريك الماوس للمستند
3. قم بإلغاء الحدث
ثم دعونا نلقي نظرة على الكود:
انسخ رمز الكود كما يلي:
وظيفة السحب (المعرف) {
فار $ = الوظيفة (العلم) {
إرجاع document.getElementById(flag);
}
$(id).onmousedown = الوظيفة (e) {
فار د = وثيقة؛
صفحة فار = {
الحدث: الوظيفة (EVT) {
var ev = evt ||.window.event;
عودة إيف؛
},
pageX: الوظيفة (evt) {
var e = this.event(evt);
إرجاع e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft)؛
},
الصفحةY: الوظيفة (EVT) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
طبقة X: وظيفة (EVT) {
var e = this.event(evt);
إرجاع e.layerX ||.
},
LayerY: الوظيفة (evt) {
var e = this.event(evt);
إرجاع e.layerY ||.e.offsetY;
}
}
فار x = page.layerX(e);
فار y = page.layerY(e);
إذا (dv.setCapture) {
dv.setCapture();
}
وإلا إذا (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = الوظيفة (هـ) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
د.onmouseup = الوظيفة () {
إذا (dv.releaseCapture) {
dv.releaseCapture();
}
وإلا إذا (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
}
}
تحليل الكود:
1.
الحصول على كائن div
انسخ رمز الكود كما يلي:
فار $ = الوظيفة (العلم) {
إرجاع document.getElementById(flag);
}
2. التقط حدث الماوس لأسفل للمستند:
يوجد هذا الجزء من الكود بداخله:
انسخ رمز الكود كما يلي:
صفحة فار = {
الحدث: الوظيفة (EVT) {
var ev = evt ||.window.event;
عودة إيف؛
},
pageX: الوظيفة (evt) {
var e = this.event(evt);
إرجاع e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft)؛
},
الصفحةY: الوظيفة (EVT) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
طبقة X: وظيفة (EVT) {
var e = this.event(evt);
إرجاع e.layerX ||.
},
LayerY: الوظيفة (evt) {
var e = this.event(evt);
إرجاع e.layerY ||.e.offsetY;
}
}
من بينها، يحصل الحدث على حدث الماوس، ويحصل كل من pageX وpageY على إحداثيات الماوس، ويحصل LayerX وlayerY على المسافة بين الماوس وحدود div.
يوجد أيضًا جزء من الكود:
انسخ رمز الكود كما يلي:
إذا (dv.setCapture) {
dv.setCapture();
}
وإلا إذا (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
يهدف هذا إلى التقاط أحداث MouseMove وMouseUp الخاصة بـ div. إذا كنت لا تعرف tx، فيمكنك التحقق من ذلك عبر الإنترنت.
3. أحداث MouseMove وmouseUp للمستند:
انسخ رمز الكود كما يلي:
d.onmousemove = الوظيفة (هـ) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
د.onmouseup = الوظيفة () {
إذا (dv.releaseCapture) {
dv.releaseCapture();
}
وإلا إذا (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
من بينها، tx وty هما أهم الرموز، والتي تستخدم لتعيين إحداثيات div.
قد يتساءل البعض لماذا -x,-y؟
x، y في الواقع تحصل على المسافة بين الماوس وحدود div، إذا لم يتم طرحها
إحداثيات سهم الماوس هي نفس إحداثيات x وy لقسم div. بعد السحب، سينتقل موضع الماوس إلى الزاوية اليسرى العليا، والتأثير هو أنه سوف يرتد بعد السحب.
انسخ رمز الكود كما يلي:
إذا (dv.releaseCapture) {
dv.releaseCapture();
}
وإلا إذا (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
الكود أعلاه هو إلغاء حدثي onmousemove وonmouseup للمستند بعد تحرير الماوس.
لقد تعلمت لغة js مؤخرًا، وسأشارككم تجاربي الجديدة في المستقبل، وآمل أن أتعلم وأحرز تقدمًا مع الجميع.