الكورس

Advertisements

HTML5 Drag & Drop API


السحب والإفلات (Drag & drop) هو مفهوم قوي لواجهة المستخدم مما يجعل من السهل سحب العناصر وإعادة ترتيبها وحذفها بمساعدة الماوس.


 

Drag & Drop Element

 

لتحقيق وظيفة السحب والإفلات باستخدام HTML4 التقليدي ، سيتعين على المطورين إما استخدام برمجة JavaScript معقدة أو أطر عمل JavaScript أخرى مثل jQuery وما إلى ذلك.

لكن مع HTML5 تتيح ميزة السحب والإفلات للمستخدم سحب عنصر وإفلاته في مكان آخر.

 

مثال للتوضيح:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .contentBox {
            max-width: 300px;
            height: 200px;
            border: 5px dashed gray;
            background: #ffffda;
            text-align: center;
            margin: 20px 0;
            color: #4b4b4b;
            padding: 10px;
        }
        
        .contentBox p {
            position: absolute;
            left: 80px;
            font-size: 20px;
            font-weight: bold;
        }
        
        .contentBox img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <h2>Drag And Drop Example</h2>

    <div id="contentBox" class="contentBox" ondrop="drop(event);" ondragover="drag(event);">
        <p>Drop image here!</p>

        <!--Dropped image here-->

    </div>

    <img src="image.png" id="first_drag" draggable="true" ondragstart="dragStart(event);" width="200" height="200" alt="Image">


    <script>
        function dragStart(ev) {
            // Sets the operation allowed for a drag source
            ev.dataTransfer.effectAllowed = "move";

            // Sets the value and type of the dragged data
            ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
        }

        function drag(ev) {
            // Prevent the browser default handling of the data
            ev.preventDefault();
            ev.stopPropagation();
        }

        function drop(ev) {
            // Cancel this event for everyone else
            ev.stopPropagation();
            ev.preventDefault();

            // Retrieve the dragged data by type
            var data = ev.dataTransfer.getData("Text");

            // Append image to the drop box
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</body>

</html>

Drag & Drop Example

Drop image here!

Image

💡 من الممكن أن يكون الكود السابق معقد إلى حدًا ما بالنسبة لك! لكن دعنا نوضح كل جزء بشكل منفصل، لتفهم كل شئ.


 

كيفية جعل العنصر قابل للسحب draggable؟

 

لجعل عنصر قابل للسحب ، أضف سمة draggable للعنصر بقيمة “true“:

<img src="image_laptop.png" draggable="true" alt="Image laptop">

 

ondragstart Attribute

 

بعد ما تجعل العنصر قابل للسحب، يجب عليك تحديد ما يجب أن يحدث عند سحب العنصر؟

في المثال السابق، تستدعي السمة ondragstart دالة dragStart(event) ، تحدد البيانات المراد سحبها:

<img src="image_laptop.png" draggable="true" ondragstart="dragStart(event);" alt="Image Laptop">

 

setData() Method

 

تحدد طريقة ()dataTransfer.setData  نوع وقيمة البيانات المسحوبة:

function dragStart(ev) {
    // Sets the value and type of the dragged data
    ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
}

 

ondragover Attribute

 

تحدد سمة ondragover مكان إسقاط البيانات المسحوبة.

بشكل افتراضي ، لا يمكن إسقاط البيانات أو العناصر في عناصر أخرى وللسماح بالإفلات ، يجب علينا منع المعالجة الافتراضية للعنصر عن طريق استدعاء طريقة ()event.preventDefault لسمة أو حدث الـ ondragover، كالتالى:

event.preventDefault();

 

ondrop Attribute

 

عند إسقاط البيانات المسحوبة ، يقع حدث drop.

كما في المثال السابق، تستدعي السمة ondrop دالة drop(event):

function drop(ev) {
    // Cancel this event for everyone else
    ev.stopPropagation();
    ev.preventDefault();

    // Retrieve the dragged data by type
    var data = ev.dataTransfer.getData("Text");

    // Append image to the drop box
    ev.target.appendChild(document.getElementById(data));
}

 

مثال أخر على السحب والإفلات

 

فى هذا المثال يمكنك سحب الصورة من إطار لإطار:

 <div id="first_contentBox" class="contentBox" ondrop="drop(event);" ondragover="drag(event);">
        <p>Drop image here!</p>

        <img src="setup_image.png" id="first_drag" draggable="true" ondragstart="dragStart(event);" width="200" height="200" alt="Setup Image">

        <!--Dropped image here-->

    </div>

    <div id="second_contentBox" class="contentBox_second" ondrop="drop(event);" ondragover="drag(event);">
        <p>Drop image here!</p>

        <!--Dropped image here-->
        
    </div>


    <script>
        function dragStart(ev) {
            // Sets the value and type of the dragged data
            ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
        }

        function drag(ev) {
            // Prevent the browser default handling of the data
            ev.preventDefault();
        }

        function drop(ev) {
            // Cancel this event for everyone else
            ev.stopPropagation();
            ev.preventDefault();

            // Retrieve the dragged data by type
            var data = ev.dataTransfer.getData("Text");

            // Append image to the drop box
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

Drag & Drop Between Frames

Drop image here!

Image

Drop image here!


 

Drag and Drop Events

 

يوفر لك الجدول التالي نظرة عامة موجزة عن جميع أحداث السحب والإفلات:

الحدث
(Event)
الوصف
ondragstartيعمل عندما يبدأ المستخدم في سحب عنصر.
ondragenterيعمل عندما يتم نقل عنصر قابل للسحب لأول مرة إلى موضع الإسقاط.
ondragoverيعمل عندما يسحب المستخدم عنصرًا فوق موضع الإسقاط.
ondragleaveيعمل عندما يسحب المستخدم عنصرًا خارج موضع الإفلات.
ondragيعمل عندما يسحب المستخدم عنصرًا إلى أي مكان (يعمل باستمرار).
ondropيعمل عندما يسقط المستخدم عنصرًا في موضع الإسقاط بنجاح.
ondragendيعمل عند اكتمال إجراء السحب، سواء كان ناجحًا أم لا.
لا يتم تشغيل هذا الحدث عند سحب ملف إلى المتصفح من سطح المكتب.
 لاحظ أنه يتم تشغيل أحداث السحب فقط؛ لا يتم تشغيل أحداث الماوس مثل mousemove أثناء عملية السحب.

 

dataTransfer Attributes

 

يوفر لك الجدول التالي نظرة عامة موجزة عن جميع سمات كائن dataTransfer:

السمة
(attribute)
الوصف
dataTransfer.setData(format, data)يضيف البيانات المحددة.
dataTransfer.getData(format)إرجاع البيانات المحددة.
dataTransfer.clearData ( [ format ] )يزيل بيانات التنسيقات المحددة.
dataTransfer.typesتُرجع قائمة DOMStringList التي تسرد التنسيقات التي تم تعيينها في حدث dragStart.
dataTransfer.filesتُرجع قائمة الملفات للملفات التي يتم سحبها (إن وجدت).
dataTransfer.setDragImage(element, x, y)يستخدم العنصر المحدد لتحديث ملاحظات السحب ، واستبدال أي ملاحظات محددة مسبقًا.
dataTransfer.addElement(element)يضيف العنصر المحدد إلى قائمة العناصر المستخدمة لتقديم ملاحظات السحب.
dataTransfer.dropEffect [ = value ]تُرجع نوع العملية المحددة حاليًا + يمكن تعيين هذه السمة لتغيير العملية المختارة.
dataTransfer.effectAllowed [ = value ]تُرجع أنواع العمليات المسموح بها + يمكن تعيين هذه السمة لتغيير العمليات المسموح بها.

 

دعم المتصفحات لعناصر drag & drop

 

المتصفحFirefoxChromeInternet ExplorerSafariOpera
من بداية الإصدار3.54.09.06.012.0


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements