يدور محتوى هذه المقالة حول كيفية تنفيذ وظيفة سحب عنصر HTML في HTML5/"> HTML5. لتنفيذ السحب والإسقاط قبل HTML5 ، تحتاج إلى استخدام JS. الآن يدعم HTML5 وظيفة السحب والإسقاط داخليًا ، ولكن لتنفيذ وظائف أكثر تعقيدًا قليلاً. لا غنى عنه. دعنا ننظر إلى بعض الأمثلة أدناه.
1. إنشاء كائن السحبيمكننا أن نخبر المتصفح من خلال السمة القابلة للسحب التي تحتاج العناصر إلى تنفيذ وظيفة السحب والإفلات. Draggable لها ثلاث قيم: True: يمكن سحب العنصر ؛ خطأ: لا يمكن سحب العنصر ؛ السيارات: يحدد المتصفح ما إذا كان يمكن سحب العنصر بنفسه.
القيمة الافتراضية للنظام هي تلقائية ، لكن المتصفح يدعم وظائف السحب والإفلات المختلفة للعناصر المختلفة في حالة السيارات ، مثل: إنه يدعم كائنات IMG ، ولكنه لا يدعم كائنات DIV. لذلك ، إذا كنت بحاجة إلى سحب عنصر ، فمن الأفضل ضبط Draggale على True. دعونا نلقي نظرة على مثال أدناه:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
#SRC> *
{
تعويم: اليسار.
}
#Target ، #SRC> IMG
{
الحدود: سوداء صلبة رقيقة.
الحشو: 2px ؛
الهامش: 4px ؛
}
#هدف
{
الارتفاع: 123 بكسل ؛
العرض: 220 بكسل ؛
محاذاة النص: المركز ؛
العرض: الجدول ؛
}
#Target> p
{
العرض: خلايا الجدول ؛
المحاذاة الرأسية: الأوسط ؛
}
#Target> img
{
الهامش: 1px ؛
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "target">
<p id = "msg">
انزل هنا </p>
</div>
</div>
<script>
var src = document.getElementById ("src") ؛
var target = document.getElementById ("Target") ؛
</script>
</body>
</html>
تأثير الجري:
2. التعامل مع الأحداث السحب وإسقاطالآن دعونا نفهم الأحداث المتعلقة بالسحب. هناك نوعان من الأحداث ، أحدهما حدث كائن السحب ، والآخر هو حدث منطقة الهبوط. تشمل أحداث السحب: DragStart: يتم تشغيله عند بدء تشغيل العنصر ؛ السحب: التشغيل أثناء سحب العنصر ؛ السحب: يتم تشغيله عند انتهاء السحب. لنأخذ مثالًا أدناه:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
#SRC> *
{
تعويم: اليسار.
}
#Target ، #SRC> IMG
{
الحدود: سوداء صلبة رقيقة.
الحشو: 2px ؛
الهامش: 4px ؛
}
#هدف
{
الارتفاع: 123 بكسل ؛
العرض: 220 بكسل ؛
محاذاة النص: المركز ؛
العرض: الجدول ؛
}
#Target> p
{
العرض: خلايا الجدول ؛
المحاذاة الرأسية: الأوسط ؛
}
#Target> img
{
الهامش: 1px ؛
}
img.dragged
{
خلفية اللون: البرتقالي.
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "target">
<p id = "msg">
انزل هنا </p>
</div>
</div>
<script>
var src = document.getElementById ("src") ؛
var target = document.getElementById ("Target") ؛
var msg = document.getElementById ("msg") ؛
src.ondragstart = function (e) {
e.target.classlist.add ("dragged") ؛
}
src.ondragend = function (e) {
e.target.classlist.remove ("dragged") ؛
msg.innerhtml = "Drop Here" ؛
}
src.ondrag = function (e) {
msg.innerhtml = e.target.id ؛
}
</script>
</body>
</html>
تأثير الجري:
3. إنشاء منطقة توصيلدعونا نلقي نظرة على الأحداث المتعلقة بمنطقة التسليم: Dragenter: يتم تشغيله عندما يدخل كائن السحب إلى منطقة التسليم ؛ السحب: يتم تشغيله عندما يتحرك كائن السحب في منطقة التسليم ؛ Dragleave: لا يتم تسليم كائن السحب إلى منطقة التسليم ، ويتم تشغيله عندما يغادر منطقة التسليم ؛ Drop: يتم تشغيله عند وضع كائن السحب في منطقة التسليم.
لنلقي نظرة على مثال:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
#SRC> *
{
تعويم: اليسار.
}
#Target ، #SRC> IMG
{
الحدود: سوداء صلبة رقيقة.
الحشو: 2px ؛
الهامش: 4px ؛
}
#هدف
{
الارتفاع: 123 بكسل ؛
العرض: 220 بكسل ؛
محاذاة النص: المركز ؛
العرض: الجدول ؛
}
#Target> p
{
العرض: خلايا الجدول ؛
المحاذاة الرأسية: الأوسط ؛
}
#Target> img
{
الهامش: 1px ؛
}
img.dragged
{
لون الخلفية: Lightgrey ؛
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "target">
<p id = "msg">
انزل هنا </p>
</div>
</div>
<script>
var src = document.getElementById ("src") ؛
var target = document.getElementById ("Target") ؛
var msg = document.getElementById ("msg") ؛
var draggedid.
Target.OndRagenter = handledrag ؛
Target.OndRagover = handledrag ؛
وظيفة handledrag (e) {
E.PreventDefault () ؛
}
target.ondrop = function (e) {
var newelem = document.getElementById (draggedid) .clonenode (false) ؛
target.innerhtml = "" ؛
Target.AppendChild (NewElem) ؛
E.PreventDefault () ؛
}
src.ondragstart = function (e) {
draggedid = e.target.id ؛
e.target.classlist.add ("dragged") ؛
}
src.ondragend = function (e) {
var elems = document.queryseLectorAll (". dragged") ؛
لـ (var i = 0 ؛ i <elems.length ؛ i ++) {
elems [i] .classlist.remove ("dragged") ؛
}
}
</script>
</body>
</html>
نتائج التشغيل:
4. استخدام datatransferنستخدم DataTransfer لتمرير البيانات من كائنات السحب إلى منطقة التسليم. يحتوي DataTransfer على الخصائص والطرق التالية: الأنواع: إرجاع تنسيق البيانات ؛ getData (<splyat>): إرجاع بيانات التنسيق المحددة ؛ setData (<splyat> ، <data>): تعيين بيانات التنسيق المحددة ؛ ClearData (<simpat>): يزيل بيانات التنسيق المحددة ؛ الملفات: إرجاع مجموعة الملفات التي تم تسليمها.
دعونا نلقي نظرة على المثال التالي ، التأثير الذي حققه هو نفس المثال 3:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
#SRC> *
{
تعويم: اليسار.
}
#SRC> IMG
{
الحدود: سوداء صلبة رقيقة.
الحشو: 2px ؛
الهامش: 4px ؛
}
#هدف
{
الحدود: سوداء صلبة رقيقة.
الهامش: 4px ؛
}
#هدف
{
الارتفاع: 123 بكسل ؛
العرض: 220 بكسل ؛
محاذاة النص: المركز ؛
العرض: الجدول ؛
}
#Target> p
{
العرض: خلايا الجدول ؛
المحاذاة الرأسية: الأوسط ؛
}
img.dragged
{
خلفية اللون: البرتقالي.
}
</style>
</head>
<body>
<div id = "src">
<img draggable = "true" id = "car1" src = "img /1.jpg" />
<img draggable = "true" id = "car2" src = "img /2.jpg" />
<img draggable = "true" id = "car3" src = "img /3.jpg" />
<div id = "target">
<p id = "msg">
انزل هنا </p>
</div>
</div>
<script>
var src = document.getElementById ("src") ؛
var target = document.getElementById ("Target") ؛
Target.OndRagenter = handledrag ؛
Target.OndRagover = handledrag ؛
وظيفة handledrag (e) {
E.PreventDefault () ؛
}
target.ondrop = function (e) {
var droppedid = e.datatransfer.getData ("text") ؛
var newelem = document.getElementById (droppedid) .clonenode (false) ؛
target.innerhtml = "" ؛
Target.AppendChild (NewElem) ؛
E.PreventDefault () ؛
}
src.ondragstart = function (e) {
e.datatransfer.setData ("text" ، e.target.id) ؛
e.target.classlist.add ("dragged") ؛
}
src.ondragend = function (e) {
var elems = document.queryseLectorAll (". dragged") ؛
لـ (var i = 0 ؛ i <elems.length ؛ i ++) {
elems [i] .classlist.remove ("dragged") ؛
}
}
</script>
</body>
</html>
5. اسحب الملف وإسقاط الملفيدعم HTML5 واجهة برمجة تطبيقات الملفات ، والتي تتيح لنا معالجة الملفات المحلية. بشكل عام ، لا نستخدم ملف API مباشرة. يمكننا استخدامه مع ميزات أخرى ، مثل الجمع بين تأثيرات السحب والإفلات ، كما هو موضح في المثال التالي:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
الجسم> *
{
تعويم: اليسار.
}
#هدف
{
الحدود: أسود مزدوج متوسط ؛
الهامش: 4px ؛
الارتفاع: 75 بكسل ؛
العرض: 200 بكسل ؛
محاذاة النص: المركز ؛
العرض: الجدول ؛
}
#Target> p
{
العرض: خلايا الجدول ؛
المحاذاة الرأسية: الأوسط ؛
}
طاولة
{
الهامش: 4px ؛
حدود الحدود: الانهيار.
}
TH ، TD
{
الحشو: 4px ؛
}
</style>
</head>
<body>
<div id = "target">
<p id = "msg">
إسقاط الملفات هنا </p>
</div>
<جدول المعرف = "البيانات">
</table>
<script>
var target = document.getElementById ("Target") ؛
Target.OndRagenter = handledrag ؛
Target.OndRagover = handledrag ؛
وظيفة handledrag (e) {
E.PreventDefault () ؛
}
target.ondrop = function (e) {
ملفات var = e.datatransfer.files ؛
var tablelem = document.getElementById ("data") ؛
tablelem.innerhtml = "<tr> <th> الاسم </th> <th> اكتب </th> <th> الحجم </th> </tr>" ؛
لـ (var i = 0 ؛ i <files.length ؛ i ++) {
var row = "<tr> <td>" + files [i] .Name + "</td> <td>" + files [i] .type + "</td> <td>" + files [i] .size + "</td> </tr>" ؛
tablelem.innerhtml += row ؛
}
E.PreventDefault () ؛
}
</script>
</body>
</html>
يقوم DataTransfer بإرجاع كائن FileList ، والذي يمكننا التعامل معه ككائن صفيف الملف ، ويحتوي الملف على الخصائص التالية: الاسم: اسم الملف ؛ النوع: نوع الملف (نوع MIME) ؛ الحجم: حجم الملف.
تأثير الجري:
6. تحميل الملفاتفيما يلي مثال على تحميل الملفات عن طريق سحب وإسقاط Ajax.
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
.طاولة
{
العرض: الجدول ؛
}
.صف
{
العرض: صف الجدول ؛
}
.خلية
{
العرض: خلايا الجدول ؛
الحشو: 5 بكسل ؛
}
.ملصق
{
محاذاة النص: صحيح ؛
}
#هدف
{
الحدود: أسود مزدوج متوسط ؛
الهامش: 4px ؛
الارتفاع: 50 بكسل ؛
العرض: 200 بكسل ؛
محاذاة النص: المركز ؛
العرض: الجدول ؛
}
#Target> p
{
العرض: خلايا الجدول ؛
المحاذاة الرأسية: الأوسط ؛
}
</style>
</head>
<body>
<form id = "fruitform" method = "post" action = "/uploadhandler.ashx">
<viv>
<viv>
<viv>
الموز: </div>
<viv>
<name name = "bananas" value = "2" /> </viv>
</div>
<viv>
<viv>
التفاح: </div>
<viv>
<input name = "Apples" value = "5" /> </viv>
</div>
<viv>
<viv>
الكرز: </div>
<viv>
<name input = "cherries" value = "20" /> </viv>
</div>
<viv>
<viv>
ملف: </div>
<viv>
<type type = "file" name = "file" /> </viv>
</div>
<viv>
<viv>
المجموع: </div>
<div id = "النتائج">
العناصر </div>
</div>
</div>
<div id = "target">
<p id = "msg">
إسقاط الملفات هنا </p>
</div>
<button id = "إرسال" type = "إرسال">
إرسال النموذج </button>
</form>
<script type = "text/javaScript">
var target = document.getElementById ("Target") ؛
var httprequest ؛
var filelist
Target.OndRagenter = handledrag ؛
Target.OndRagover = handledrag ؛
وظيفة handledrag (e) {
E.PreventDefault () ؛
}
target.ondrop = function (e) {
filelist = e.datatransfer.files ؛
E.PreventDefault () ؛
}
document.getElementById ("إرسال"). onClick = وظيفة handbuttonpress (e) {
E.PreventDefault () ؛
var form = document.getElementById ("fruitform") ؛
var formData = new formData (form) ؛
إذا (fileList) {
لـ (var i = 0 ؛ i <fileList.length ؛ i ++) {
formData.append ("file" + i ، filelist [i]) ؛
}
}
httprequest = new xmlhttprequest () ؛
httprequest.onreadyStateChange = معالجات ؛
httprequest.open ("post" ، form.action) ؛
httprequest.send (formData) ؛
}
وظيفة معالجات () {
if (httprequest.readyState == 4 && httprequest.status == 200) {
var data = json.parse (httprequest.responsetext) ؛
document.getElementById ("النتائج"). innerhtml = "you urder" + data.total + "items" ؛
}
}
</script>
</body>
</html>
تأثير:
قد يكون لبعض الأمثلة المذكورة أعلاه آثار متصفحات مختلفة. أنا أستخدم متصفح الكروم. باستثناء الأمثلة 5 و 6 التي لا تدعم ملفات متعددة ، يتم تشغيل أمثلة أخرى بشكل طبيعي. يمكنك تنزيل العرض التوضيحي.
عنوان التنزيل التجريبي: html5guide.draggable.rar