حدث ondragstart
التعريف والاستخدام
يحدث حدث ondragstart عند بدء المستخدم في سحب العنصر أو اختيار النص.
تساهم التسوية هي وظيفة شائعة جدًا في HTML5. وهي عندما تُمسك ببرنامج وتقوم بسحبه إلى موقع آخر. للحصول على معرفة إضافية، يُرجى قراءة ما نكتب عن HTML5 السحب والإفلاتدليل HTML الكامل.
التعليقات:لجعل العنصر قابلًا للسحب، استخدم خاصية draggable في HTML5.
نصيحة:بافتراض الافتراض، يمكن سحب الروابط والصور دون الحاجة إلى خاصية draggable.
في مراحل مختلفة من عملية السحب والوضع، يتم استخدام العديد من الأحداث، وقد تحدث ما يلي:
الأحداث التي تُطلق على العنصر القابل للسحب (العنصر المصدر):
- ondragstart - يحدث عند بدء المستخدم في سحب العنصر.
- ondrag - يحدث عند سحب العنصر.
- ondragend - يحدث عند إكمال المستخدم لسحب العنصر.
الأحداث التي تُطلق على الهدف:
- ondragenter - يحدث عند دخول العنصر لهدف الوضع.
- ondragover - يحدث عند وجود العنصر على هدف الوضع.
- ondragleave - يحدث عند مغادرة العنصر لهدف الوضع.
- ondrop - يحدث عند وضع العنصر الذي يتم سحبه على هدف الوضع.
مثال
عندما يبدأ المستخدم في سحب عنصر <p>، يتم تنفيذ JavaScript:
<p draggable="true" ondragstart="myFunction(event)">أحركني!</p>
هناك أمثلة TIY أكثر في نهاية الصفحة.
النحو
في HTML:
<element ondragstart="myScript">
في JavaScript:
object.ondragstart = function(){myScript};
في JavaScript، استخدم دالة addEventListener() كما يلي:
object.addEventListener("dragstart", myScript);
التعليقات:Internet Explorer 8 أو الإصدارات الأقدم لا تدعمها addEventListener() method.
Technical Details
Bubble: | Support |
---|---|
Cancelable: | Support |
Event type: | DragEvent |
Supported HTML tags: | All HTML elements |
DOM Version: | Level 3 Events |
Browser Support
The numbers in the table indicate the first browser version that fully supports the event.
Event | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
More examples
For ++
<p draggable="true" id="dragtarget">Drag me!</p> <div class="droptarget">Drop here!</div> <script> /* ++ */ document.addEventListener("dragstart", function(event) { // ++ event.dataTransfer.setData("Text", event.target.id); // ++ document.getElementById("demo").innerHTML = "++"; // ++ event.target.style.opacity = "0.4"; }); // ++ document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // ++ document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "++"; event.target.style.opacity = "1"; }); /* ----------------- الأحداث التي تُشغّل عند وضع النقطة الهدف ----------------- */ // عند دخول عنصر p القابل للنقل droptarget، تغيير نمط الحدود للDIV document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // بشكل افتراضي، لا يمكن وضع بيانات/عناصر في عناصر أخرى. لمنح الإذن بالوضع، يجب منع معالجة العنصر الافتراضية document.addEventListener("dragover", function(event) { event.preventDefault(); }); // عند مغادرة عنصر p القابل للنقل droptarget، أعد تعيين نمط الحدود للDIV document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* عند النقل - منع معالجة البيانات الافتراضية لل브라우زر (افتراضيًا مفتوحًا كرابط) */ إعادة تعيين لون النص والخطوط الحدودية للDIV استخدام طريقة dataTransfer.getData() للحصول على بيانات النقل المعلومات المنقولة هي معرف العنصر المنقول ("drag1") الإضافة العنصر المُنقل إلى العنصر المُوضع */ document.addEventListener("drop", function(event) { event.preventDefault(); if ( event.target.className == "droptarget" ) { document.getElementById("demo").style.color = ""; event.target.style.border = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }); </script>