يشاركك المثال الموجود في هذه المقالة التعليمات البرمجية المحددة لتحقيق تأثير سحب الماوس في JavaScript للرجوع إليها، ويكون العرض
هذه المرة كما يلي:
أعتقد أن صعوبة هذه التجربة تكمن في الحفاظ على الوضع النسبي للمربع والماوس دون تغيير. كيف يمكن تحقيق تأثير السحب بالضغط على الماوس وتحريكه
؟
نحتاج إلى استخدام ثلاث وظائف: onmousedown و onmousemove و onmouseup ، والتي تمثل على التوالي الضغط على الماوس وتحريك الماوس ورفع الماوس.
في وظيفة رد الاتصال للضغط على الماوس ، نحتاج إلى الحصول على الموضع الأولي للماوس من خلال clientX و clientY . ومن خلال offsetLeft و offsetTop نحصل على الموضع الأولي للمربع، ثم نحسب الفرق بين الموضع الأولي للماوس والموضع الأولي للمربع
في وظيفة رد الاتصال لحركة الماوس ، نحتاج إلى الحصول على الموضع الحالي لـ المربع بناءً على الفرق بين موضع الفأرة والموضع المحسوب مسبقًا، ثم قم بتغيير قيمته اليسرى والعليا، لا تنس ضبط الموضع على مطلق (لأنني نسيت للتو...)
في وظيفة رد الاتصال الخاصة بالمربع رفع الماوس ، نحتاج إلى مسح حركة الماوس ورفع الماوس ، عن طريق ضبط قيم onmousemove و onmouseup على القيمة null
انتبه أيضًا! ! !
يجب كتابة كل من وظيفة تحريك الماوس ووظيفة رفع الماوس في وظيفة الضغط على الماوس، لأننا نحتاج إلى تصميم السلوك اللاحق بعد إجراء الضغط على الماوس، والنقطة المهمة جدًا هي:
وظيفة الضغط على الماوس هي p، والماوس إن النقل ورفع الماوس موجودان في المستند
لأننا لا نعني أن الماوس يتحرك في الصفحة، ولكن
من المحتمل أن تكون النقاط الرئيسية هي الكود التالي:
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, original-scale=1.0">
<العنوان>المستند</title>
<نمط>
#صندوق{
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
لون الخلفية: زبرجد.
نصف قطر الحدود: 14 بكسل؛
ظل الصندوق: 2px 2px 6px rgba(0,0,0,.3);
/* الأخيار يريدون التحرك وتغيير اليسار دون تحديد الموضع. . . */
الموقف: مطلق؛
}
</نمط>
</الرأس>
<الجسم>
<div معرف = "مربع"></div>
<النص البرمجي>
Let box=document.getElementById("box");
box.onmousedown=function(event){
Let disx=event.clientX-box.offsetLeft;
Let disy=event.clientY-box.offsetTop;
// هذا ليس box.onmousemove، ولكن document.onmousemove
document.onmousemove=function(event){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
// ليتم كتابتها في omniusedown document.onmouseup=function(){
// يجب تعيين كلاهما على قيمة فارغة
document.onmousemove=null;
document.onmouseup=null;
عودة كاذبة.
}
}
</script>
</الجسم>
</html> التوصيات ذات الصلة: [فيديو تعليمي لـ JavaScript]
ما ورد أعلاه هو المحتوى التفصيلي لـ js لمحاكاة أحداث سحب الماوس (مع أمثلة للصور والنصوص) لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني !
