اليوم سوف نلقي نظرة على كيفية منع سحب الكائنات من الخروج من وظيفة Div معينة وسحب وظيفة الامتزاز.
في المرة الأخيرة ، تحدثنا عن السحب والإسقاط ، لا يمكننا الخروج من المنطقة البصرية. على هذا الأساس ، نضيف Div الوالد لمنعه من الخروج من الوالد. المبدأ هو نفسه كما كان من قبل ، إنه بسيط.
رمز HTML:
<div id = "div2"> <div id = "div1"> </div> </viv>
رمز CSS:
<type type = "text/css"> #div1 {width: 100px ؛ الارتفاع: 100px ؛ الخلفية: أحمر. الموقف: مطلق ؛ } #div2 {width: 400px ؛ الارتفاع: 300 بكسل ؛ الخلفية: #CCCCCC ؛ الموقف: قريب } </style>رمز JavaScript:
<script type = "text/javaScript"> // اسحب وإسقاط Div فارغ. الإصدار المنخفض من firefox لديه نافذة bug.onload = function () {var odiv = document.getElementById ("div1") ؛ var odiv2 = document.getElementById ("div2") ؛ var disx = 0 ؛ var disy = 0 ؛ odiv.onmousedown = function (ev) {var oevent = ev || حدث؛ disx = oevent.clientx - odiv.offsetleft ؛ disy = oevent.clienty - odiv.offsettop ؛ document.onmousemove = function (ev) {var oevent = ev || حدث؛ // قم بتخزين الموقع الحالي لـ div var odivleft = oevent.clientx - disx ؛ var odivtop = oevent.clienty - disy ؛ if (odivleft <0) {odivleft = 0 ؛ } آخر إذا (odivleft> odiv2.offsetWidth - Odiv.OffSetWidth) {odivleft = odiv2.offsetwidth - odiv.offsetWidth ؛ } if (odivtop <0) {odivtop = 0 ؛ } آخر إذا (odivtop> odiv2.offsetheight - odiv.offsetheight) {odivtop = odiv2 } odiv.style.left = odivleft + 'px' ؛ Odiv.Style.top = odivtop + 'px' ؛ } ؛ document.onmouseup = function () {document.onmousemove = null ؛ document.onmouseup = null ؛ } ؛ العودة كاذبة // حظر الحدث الافتراضي وحل علة Firefox} ؛ } ؛ </script>العروض كما يلي:
الأمر بسيط.
الشيء التالي هو كيفية جعلها تمتص تلقائيًا.
في الواقع ، غالبا ما يستخدم هذا من قبل الناس. على سبيل المثال ، عندما تكون هناك نافذة صغيرة في PS تسحبها إلى حافة الصفحة ، فإنها ستربطها تلقائيًا.
كيف يمكن أن يكون لسحبنا وإسقاطنا هذه الوظيفة؟
تم ذكر هذا بالفعل أثناء التمرين من قبل. إنه مثل أخذ سيارة أجرة ولا يمكنك ترك حديقة السائقين هناك بالضبط. يجب أن يكون متوقفة بالقرب من الوجهة.
الشيء نفسه ينطبق على البرنامج. مثلما حان الوقت للوصول إلى هناك ، يمكن تعيينه مباشرة. لنفترض أن الكائن الذي قمت بسحبه هو 50 بكسل بعيدًا عن اليسار ، وأعتقد أنه موجود على اليسار ، وإذا تم تعيينه مباشرة إلى 0 ، فسيتم تصنيفه تلقائيًا.
المبدأ بسيط للغاية ، دعنا نرى كيف يتم تنفيذ الرمز. فقط قم بتعديل قليل
<script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementById ("div1") ؛ var odiv2 = document.getElementById ("div2") ؛ var disx = 0 ؛ var disy = 0 ؛ odiv.onmousedown = function (ev) {var oevent = ev || حدث؛ disx = oevent.clientx - odiv.offsetleft ؛ disy = oevent.clienty - odiv.offsettop ؛ document.onmousemove = function (ev) {var oevent = ev || حدث؛ var odivleft = oevent.clientx - disx ؛ var odivtop = oevent.clienty - disy ؛ // عندما يكون اليسار أقل من 50 ، سيكون تلقائيًا 0. هذا سيدرك الامتزاز إذا (Odivleft <50) {Odivleft = 0 ؛ } آخر إذا (odivleft> odiv2.offsetWidth - Odiv.OffSetWidth) {odivleft = odiv2.offsetwidth - odiv.offsetWidth ؛ } if (odivtop <0) {odivtop = 0 ؛ } آخر إذا (odivtop> odiv2.offsetheight - odiv.offsetheight) {odivtop = odiv2 } odiv.style.left = odivleft + 'px' ؛ Odiv.Style.top = odivtop + 'px' ؛ } ؛ document.onmouseup = function () {document.onmousemove = null ؛ document.onmouseup = null ؛ } ؛ العودة كاذبة } ؛ } ؛ </script>في المرة القادمة ، سنتحدث عن التطبيقات المتقدمة ، والتي ستكون أكثر مسؤولية وفائدة. تم تحسين وظيفة السحب والإفلات لدينا.
على سبيل المثال ، سحب الصور واختيار النص. على سبيل المثال ، لا يوجد سوى div واحد على صفحة السحب التي نستخدمها حاليًا ، والتي لن نواجهها في التطوير العادي.
في الواقع ، عندما يكون هناك شيء ما على الصفحة ، ما هي المشكلات التي ستحدث مع هذا السحب؟ ؟ ؟
سيتم حلها في المرة القادمة ~ يرجى التطلع إلى ذلك