يتم تنفيذ الكثير من الوظائف على جهاز الكمبيوتر الخاص بـ HTML5 ، ويتم استخدام عمليات تحميل عمليات السحب أيضًا في العمل.
الحدث الزناد (عنصر المصدر) على هدف السحب:OndragStart -المستخدمين عندما يبدأ المستخدم في سحب العنصر
يتم تشغيل ondrag -element عند السحب
ondragend -عنصر الانتهاء من المستخدم الزناد
حدث الحدث عند إطلاق الهدف:ondragenter -قام بتثبيط هذا الحادث عندما يدخل الكائن الذي تم سحبه بواسطة الماوس حاويةه
Ondragover -عندما يتم سحب كائن تم سحبه داخل نطاق حاوية كائن أخرى ، فإنه يؤدي إلى هذا الحادث
ondragleave -trigger هذا الحادث عندما يترك الكائن الذي تم سحبه بواسطة الماوس الحاوية
Ondrop -during argr ، فإنه يؤدي إلى هذا الحدث عند إطلاق مفتاح الماوس
الترميز
<html lang = en> <head> <meta charset = utf-8> <title> 拖拽 </title> <style> اللون: #ccc ؛}#box2 {خلفية اللون:#000 ؛} </style> </head> <body> <div id = box1 class = box> </viv> <div id = box2 class = box> </viv> <img id = img1 src = 1.jpg> <div id = msg> </viv> </body> <script> var box1div ، box2div ، msgdiv ، img1 ؛ = document.getElementByid (box1 ') ؛ e) {e.preventDefault () ؛} box2div.ondragover = function (e) {E.PreventDefault () ؛} img1.ondragstart = function (e) d '،' img1 ') ؛} box1div.ondrop = dropimghandler ؛ .ondrop = dropimghandler ؛} dropimghandler (e) j) {s+= k+:+obj [k]+<br/> ؛يمكن لهذه الوظيفة سحب الصورة في اثنين من divs على اليسار واليمين.
فيما يلي رمز السحب والتحميل.
<! HEIG HT: 500PX ؛} </style> </head> <body> <div id = imgcontainer> </viv> <div id = msg> </body> <script> var imgcontainer ، msgdiv ؛ (هـ) {imgcontainer = document.getElementByid ('imgcontainer') ؛ E.PreventDefault () ؛ // فيما يلي العملية المعروضة في ImgContainer بعد الحصول على الصورة. ///} // firster.readasdataurl (F) ؛ obj [k]+<br/> ؛} msgdiv.innerhtml = s ؛} </script> </htmlما سبق هو كل محتويات هذا المقال.