السحب/إسقاط هو ميزة شائعة جدا. يمكنك الحصول على كائن وسحبه إلى المنطقة التي تريد وضعها. تنفذ العديد من JavaScripts الوظائف ذات الصلة بالمثل ، مثل مكون DragandDrop في jQueryui. في HTML5 ، يصبح Drag Drop العملية القياسية وأي عنصر يدعمه. لأن هذه الوظيفة شائعة جدًا ، تدعم جميع المتصفحات السائدة هذه العملية.
تمكين خاصية السحب القابلة للتطبيقالأمر بسيط للغاية. ما عليك سوى تعديل سمة السحب لعنصر إلى السحب ، وهذا العنصر يدعم السحب ، كما هو موضح أدناه:
<imgdraggable = "true"/>
تمرير البيانات أثناء السحبأثناء عملية السحب ، غالبًا ما نحتاج إلى تمرير البيانات المنطقية المقابلة لإكمال عملية التحويل. هنا نستخدم بشكل رئيسي كائن DataTransfer لنقل البيانات. دعونا نلقي نظرة على أعضائها أولاً:
الطريقة الأعضاء:
setData (التنسيق ، البيانات): قم بتعيين البيانات التي تم سحبها إلى كائن DataTransfer.
التنسيق: معلمة سلسلة تحدد نوع البيانات التي يتم سحبها. يمكن أن تكون قيم هذه المعلمة نصًا (نوع النص) و URL (نوع url). هذه المعلمة مستقلة عن الحالة ، وبالتالي فإن النص هو نفس النص.
البيانات: معلمة نوع متغير تحدد البيانات التي يتم سحبها. يمكن أن تكون البيانات نصية ، مسار الصورة ، عنوان URL ، إلخ.
هذه الوظيفة لها قيمة إرجاع من نوع منطقي. صحيح يعني أنه يتم إضافة البيانات بنجاح إلى dataTransfer ، وينعكس خطأ أنها غير ناجحة. إذا لزم الأمر ، يمكن استخدام هذه المعلمة لتحديد ما إذا كان ينبغي استمرار بعض المنطق.
getData (التنسيق): احصل على بيانات السحب المخزنة في datatransfer.
يعني التنسيق نفس الشيء كما في setData ، ويمكن أن تكون القيم نص (نوع النص) وعنوان URL (نوع url).
ClearData (التنسيق): يزيل بيانات النوع المحدد.
بالإضافة إلى النص (نوع النص) وعنوان URL (نوع عنوان URL) الذي يمكن تحديده أعلاه ، يمكن أن يأخذ التنسيق هنا أيضًا القيم التالية: ملف الملف ، عنصر HTML-HTML ، صورة الصورة.
يمكن استخدام هذه الطريقة لمعالجة أنواع البيانات التي تم سحبها بشكل انتقائي.
أعضاء السمة :Effected: يضبط أو يحصل على العملية التي يمكن أن تنفيذها البيانات في عنصر مصدر البيانات.
نوع السمة عبارة عن سلسلة ، ونطاق القيمة كما يلي:
بيانات نسخة النسخ.
ارتباط بيانات الارتباط.
بيانات Move-Mobile
Copylink - نسخ أو ارتباط بيانات ، يحددها الكائن الهدف.
copymove - نسخ أو نقل البيانات ، تحددها الكائن الهدف.
LinkMove - ربط أو نقل البيانات ، تحددها الكائن الهدف.
يتم دعم جميع العمليات الكل.
لا يحظر أن لا تقلب.
غير مهتم - القيمة الافتراضية ، تعتمد السلوك الافتراضي.
لاحظ أنه بعد إعداد التأثير الذي لا شيء ، يحظر السحب ، ولكن لا يزال شكل الماوس يوضح شكل كائن لا يمكن سحبه. إذا كنت لا ترغب في عدم عرض شكل الماوس هذا ، فأنت بحاجة إلى تعيين قيمة الإرجاع الخاصة بحدث حدث النافذة إلى False.
Dropeffect: مجموعات أو يحصل على العمليات المسموح بها على الهدف الذي تم سحبه وشكل الماوس المرتبط به.
نوع السمة عبارة عن سلسلة ، ونطاق القيمة كما يلي :نسخة-شكل الماوس عندما يظهر كنسخة ؛
يظهر الرابط-الماوس على شكل اتصال ؛
تحرك-الماوس يظهر كشكل متحرك.
لا شيء (افتراضي) - يظهر الماوس كشكل دون سحب.
يحدد Effectlooled العمليات التي يدعمها مصدر البيانات ، لذلك يتم تحديده عادة في حدث OnDragStart. يحدد Dropeffect الإجراءات المدعومة بسحب الهدف ، لذلك يتم استخدامه عادة في أحداث مثل Ondragenter و Ondragover و OnDrop على الهدف الذي تم سحبه.
الملفات: إرجاع قائمة ملفات الملفات التي تم سحبها.
الأنواع: قائمة أنواع البيانات المرسلة في OnDragStart (بيانات السحب).
يجعل وجود كائن datatransfer من الممكن تمرير البيانات المنطقية بين مصدر البيانات الموسع والعنصر الهدف. عادةً ما نستخدم طريقة setData لتوفير البيانات في حدث OnDragStart لعنصر مصدر البيانات ، ثم في العنصر الهدف ، نستخدم طريقة getData للحصول على البيانات.
الأحداث التي تم تشغيلها أثناء السحبفيما يلي الحدث الذي سيحدث عند السحب والإسقاط. في الأساس ، يكون ترتيب الأحداث المفعول هو الترتيب التالي:
DragStart: يتم تشغيله عندما يبدأ العنصر الذي سيتم سحبه في السحب. كائن الحدث هذا هو العنصر السحب.
السحب: يتم تشغيله عند سحب عنصر ما ، كائن الحدث هذا هو العنصر الذي تم سحبه.
Dragenter: يتم تشغيله عند سحب عنصر إلى العنصر المستهدف. كائن الحدث هذا هو العنصر الهدف.
Dragover: يتم تشغيله عند سحب عنصر لتحريك العنصر المستهدف. كائن الحدث هذا هو العنصر الهدف.
Dragleave: يتم تشغيله عند سحب عنصر بعيدًا عن العنصر المستهدف. كائن الحدث هذا هو العنصر الهدف.
Drop: يتم تشغيله عند وضع العنصر المجرى في العنصر المستهدف. كائن الحدث هذا هو العنصر الهدف.
Dragend: تم تشغيله بعد الإسقاط ، والذي يتم تشغيله عند اكتمال السحب. كائن الحدث هذا عنصر تم سحبه.
في الأساس ، سيتم تمرير حدث معلمة الحدث في العناصر ذات الصلة ، والتي يمكن تعديلها بسهولة. هنا ، لا نحتاج إلى التعامل مع كل حدث ، وعادة ما نحتاج فقط إلى توصيل بعض الأحداث الرئيسية.
حدث DragStartتحتوي المعلمات التي تم تمريرها من هذا الحدث على الكثير من المعلومات ، ويمكنك بسهولة الحصول على العناصر التي تم سحبها (Event.Target) ؛ يمكنك تعيين البيانات المجردة (event.datatransfer.setData) ؛ بحيث يمكنك بسهولة تنفيذ المنطق وراء السحب (بالطبع ، يمكنك أيضًا تمرير معلمات أخرى عند الربط).
أثناء السحب - أحداث Ondrag و Ondragover و Ondragenter و Ondragleave كائن حدث ONDRAG هو عنصر السحب ، وعادة ما يتم التعامل مع هذا الحدث بشكل متكرر. يحدث حدث OnDragenter عند السحب إلى العنصر الحالي ، يحدث حدث OnDragleave عند الخروج من العنصر الحالي ، ويحدث حدث OnDragover عندما يتحرك السحب في العنصر الحالي.شيء واحد فقط يجب ملاحظته هنا هو أنه افتراضيًا ، يحظر المتصفح إسقاط العناصر ، لذلك لكي تنخفض عناصر ، تحتاج إلى إرجاع خطأ في هذه الوظيفة أو الاتصال بالطريقة. preventDefault (). كما هو موضح في المثال التالي.
السحب نهاية - حدث Ondrop ، Ondragendعند إسقاط البيانات القابلة للسحب ، يتم تشغيل حدث الانخفاض. بعد انتهاء الهبوط ، يتم تشغيل حدث Dragend ، ويستخدم هذا الحدث أقل نسبيًا.
لنلقي نظرة على مثال بسيط:
<! doctypehtml>
<html>
<head>
<scriptType = "Text/JavaScript">
FunctionAllallyDrop (EV) {
ev.preventDefault () ؛
}
FunctionDrag (EV) {
ev.datatransfer.setData ("text" ، ev.target.id) ؛
}
FunctionDrop (EV) {
vardata = ev.datatransfer.getData ("text") ؛
ev.target.appendChild (document.getElementById (data)) ؛
ev.preventDefault () ؛
}
</script>
</head>
<body>
<divid = "div1" ondrop = "drop (event)" ondragover = "allowdrop (event)"> </viv>
<imgid = "drag1" src = "img_logo.gif" draggable = "true" ondragstart = "drag (event)" width = "336" height = "69"/>
</body>
</html>
سحب الملف وسحبهلقد استخدم المثال أعلاه طرقًا وخصائص مختلفة من DataTransfer. دعنا نلقي نظرة على تطبيق آخر مثير للاهتمام على الإنترنت: اسحب وإسقاط صورة على صفحة الويب ثم عرضها على صفحة الويب. يستخدم هذا التطبيق خاصية الملفات الخاصة بـ Datatransfer.
<! doctypehtml>
<html>
<head>
<metacharset = "utf-8">
<title> html5 سحب وإسقاط ملف </title>
<style>
#القسم {font-family: "Georgia" ، "Microsoft Yahei" ، "Shines Song" ؛}
.Container {display: inline-block ؛ min-height: 200px ؛ min-width: 360px ؛ color:#f30 ؛ padding: 30px ؛ border: 3pxsolid#ddd ؛ -moz-border-radius: 10px ؛ -webkit-bordius: 10px ؛ border-radius: 10px ؛}
.preview {max-width: 360px ؛}
#files-list {position: absolute ؛ top: 0 ؛ left: 500px ؛}
#list {العرض: 460px ؛}
#list.preview {max-width: 250px ؛}
#listp {color:#888 ؛ font-size: 12px ؛}
#list.green {color:#09c ؛}
</style>
</head>
<body>
<divid = "section">
<p> اسحب صورتك إلى الحاوية أدناه: </p>
<divid = "container" class = "container">
</div>
<divid = "files-list">
<p> الملفات التي تم سحبها في: </p>
<ulid = "list"> </ul>
</div>
</div>
<script>
if (window.filereader) {
varlist = document.getElementById ('list') ،
cnt = document.getElementById ('حاوية') ؛
// احكم على ما إذا كانت الصورة
FunctionIsimage (type) {
التبديل (اكتب) {
case'image/jpeg ':
case'image/png ':
case'image/gif ':
case'image/bmp ':
case'image/jpg ':
عودة
تقصير:
ReturnFalse
}
}
// تعامل مع قائمة ملفات السحب والإسقاط
وظيفة HandleFilesElect (evt) {
evt.stoppropagation () ؛
evt.preventDefault () ؛
varfiles = evt.datatransfer.files ؛
لـ (vari = 0 ، f ؛ f = files [i] ؛ i ++) {
vart = f.type؟ f.type: 'n/a' ،
reader = newFilereader () ،
تبدو = وظيفة (f ، img) {
list.innerhtml+= '<li> <strong>'+f.name+'</strong> ('+t+
')-'+f.size+'bytes <p>'+img+'</p> </li>' ؛
cnt.innerhtml = img ؛
} ،
isimg = isimage (t) ،
IMG
// معالجة الصور التي تم الحصول عليها
إذا (isimg) {
reader.onload = (function (thefile) {
returnfunction (e) {
img = '<imgclass = "معاينة" src = "'+e.target.result+'" title = "'+thefile.name+'"/>' ؛
تبدو (thefile ، img) ؛
} ؛
}) (و)
reader.readasdataurl (f) ؛
}آخر{
IMG = '"O ((> ω <)) O" ، ما أرسلته ليس صورة! ! '
تبدو (F ، IMG) ؛
}
}
}
// التعامل مع الإدراج واسحب التأثير
functionHandLledRagenter (evt) {this.setAttribute ('style' ، 'border-style: shaded ؛') ؛}
functionHandLledRagleave (evt) {this.setattribute ('style' ، '') ؛}
// التعامل مع أحداث سحب الملف لمنع إعادة التوجيه الناجم عن الأحداث الافتراضية للمتصفح
وظيفة {evt) {
evt.stoppropagation () ؛
evt.preventDefault () ؛
}
cnt.addeventListener ('Dragenter' ، handledragenter ، false) ؛
cnt.addeventListener ('Dragover' ، HandledRagover ، false) ؛
cnt.addeventListener ('Drop' ، مقبضات ، false) ؛
cnt.addeventListener ('dragleave' ، handledragleave ، false) ؛
}آخر{
document.getElementById ('section'). innerhtml = 'browser لا يدعمه ، زميله' ؛
}
</script>
</body>
</html>
في هذا المثال ، يتم استخدام API لقراءة الملف في HTML5: كائن FileReader ؛ يوفر هذا الكائن الطريقة غير المتزامنة التالية لقراءة الملفات:
1.Filereader.ReadasBinaryString (FileBlob)
اقرأ الملف في الوضع الثنائي ، ستحتوي سمة النتيجة على التنسيق الثنائي لملف
2.filereader.readastext (FileBlob ، Opt_encoding)
اقرأ الملف في وضع النص. ستحتوي سمة النتيجة على تنسيق النص لملف. المعلمة فك التشفير الافتراضية هي UTF-8.
3.filereader.readasdataurl (ملف)
ستتضمن قراءة نموذج الملف في نموذج عنوان URL تنسيق Dataurl لملف (عادة ما تكون الصور بهذه الطريقة).
عند قراءة الملف باستخدام الطريقة أعلاه ، سيتم تشغيل الأحداث التالية:
onloadstart ، onprogress ، onabort ، onerror ، onload ، onloadend
هذه الأحداث بسيطة للغاية ، فقط ربط عند الحاجة. انظر مثال الرمز التالي:
FunctionStarTread () {
// الحصول على inputelementthroughdom
varfile = document.getElementById ('file'). files [0] ؛
if (ملف) {
getastext (ملف) ؛
}
}
FunctionGetAstext (ReadFile) {
varreader = newFilereader () ؛
// readfileintomoryasutf-16
reader.ReadastExt (ReadFile ، "UTF-16") ؛
// handleprogress ، النجاح ، Anderrors
reader.onprogress = updateProgress ؛
reader.onload = loaded ؛
reader.onerror = errorHandler ؛
}
FunctionUpDateProgress (evt) {
if (evt.lengthComputable) {
//evt.loadedandevt.totalareprogresseventProperties
varloaded = (evt.loaded/evt.total) ؛
إذا (محملة <1) {
// regreasetheprogbarlength
//style.width=(Loaded*200)+"PX "؛
}
}
}
Functioned (evt) {
// GOTTHEREADFILDATA
varfilestring = evt.target.Result ؛
// handleutf-16filedump
if (utils.regexp.ischinese (filestring)) {
// Chinesecharacters+NameValidation
}
آخر{
// RunotherCharSettEtest
}
//xhr.send(filestring)
}
FunctionerRorHandler (evt) {
if (evt.target.error.name == "notreadableerR") {
// thefile يمكن أن تسقط
}
}
اسمحوا لي أن أتحدث باختصار عن ذلك هنا: يستخدم تنزيل الملف العادي طريقة Window.Open ، على سبيل المثال:
window.open ('http://aaa.bbb.com/ccc.rar' ،'_blank')
المرجع العملي: المستند الرسمي: http://www.w3schools.com/html5/موقع تعليمي جيد: http://html5.phphube.com/html5/features/drapanddrop/
تعليمات MSDN: http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
وصف مفصل لسحب وإسقاط الملف: http://www.html5rocks.com/zh/tutorials/file/dndfiles/
اسحب الملف وتحميله: http://www.chinaz.com/design/2010/0909/131984.shtml
مثال كامل على سحب الملف وتحميله: http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
مثال على تنزيل الملف:
دليل window.open: http://www.vevb.com/liulf/archive/2010/03/01/1675511.html
Window.Open المعلمة: http://www.koyoz.com/blog/؟action=show&id=176