HTML5 এর Drag and Drop API গাইড ও নোট

Web Development - এইচটিএমএল (HTML5)

272

HTML5 এর Drag and Drop API (ড্র্যাগ এবং ড্রপ অ্যাপিআই) একটি শক্তিশালী ফিচার যা ব্যবহারকারীদের কোনো একটি উপাদান (element) বা অবজেক্ট (object) টেনে (drag) নিয়ে এসে অন্য জায়গায় ড্রপ (drop) করতে সক্ষম করে। এটি ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি ইন্টারফেস তৈরির জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি একটি ফাইল ড্র্যাগ করে আপলোড করতে পারেন, বা তালিকায় আইটেম পুনর্বিন্যাস করতে পারেন।

Drag and Drop এর মূল ধারণা

Drag and Drop এর ক্ষেত্রে তিনটি প্রধান ধাপ থাকে:

ড্র্যাগ (Drag): আপনি একটি উপাদানকে মাউস বা টাচ ব্যবহার করে টেনে নিয়ে আসেন।
ড্রপ (Drop): ড্র্যাগ করা উপাদানটি নির্দিষ্ট একটি স্থানে রাখতে হয়।
ড্র্যাগ শুরু এবং শেষ (Drag Start and End): যখন আপনি ড্র্যাগ শুরু করেন এবং শেষ করেন, তখন কিছু ইভেন্ট ট্রিগার হয়।

Drag and Drop API-এর প্রধান ইভেন্টগুলি

HTML5 এর Drag and Drop API ব্যবহার করার জন্য বেশ কিছু ইভেন্ট এবং প্রপার্টি ব্যবহার করা হয়। এগুলো হলো:

1. dragstart

এটি তখন ঘটে যখন আপনি উপাদানটি ড্র্যাগ করতে শুরু করেন। এই ইভেন্টে আপনি ড্র্যাগ করা উপাদানটি সম্পর্কে ডেটা পাঠাতে পারেন।

2. dragend

এটি ঘটে যখন ড্র্যাগ সম্পূর্ণ হয়, অর্থাৎ উপাদানটি টেনে নেওয়া শেষ হয়ে যায়।

3. dragover

এটি ঘটে যখন ড্র্যাগ করা উপাদানটি ড্রপ টার্গেটের উপর দিয়ে চলে। এটি প্রতিবার ড্র্যাগ করা উপাদানটি টার্গেটের ওপর আসে, এবং এটি প্রয়োজনীয়ভাবে preventDefault() কল করতে পারে।

4. dragenter

এটি তখন ঘটে যখন ড্র্যাগ করা উপাদানটি ড্রপ টার্গেটের ভিতরে প্রবেশ করে।

5. dragleave

এটি ঘটে যখন ড্র্যাগ করা উপাদানটি ড্রপ টার্গেট থেকে বাইরে চলে যায়।

6. drop

এটি ঘটে যখন ড্র্যাগ করা উপাদানটি ড্রপ টার্গেটে সঠিকভাবে ড্রপ করা হয়।

Drag and Drop API ব্যবহার করে একটি উদাহরণ

নিচে একটি সিম্পল উদাহরণ দেওয়া হলো যেখানে একটি তালিকার আইটেম ড্র্যাগ এবং ড্রপ করা যাবে।

HTML কোড

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Drag and Drop API</title>
    <style>
        .drag-item {
            padding: 10px;
            margin: 5px;
            background-color: #f4f4f4;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        #dropZone {
            width: 300px;
            height: 200px;
            margin-top: 20px;
            background-color: #f9f9f9;
            border: 2px dashed #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h2>Drag and Drop Example</h2>

    <div id="drag1" class="drag-item" draggable="true">Item 1</div>
    <div id="drag2" class="drag-item" draggable="true">Item 2</div>
    <div id="drag3" class="drag-item" draggable="true">Item 3</div>

    <div id="dropZone">Drop here</div>

    <script>
        // ড্র্যাগ ইভেন্ট হ্যান্ডলার
        const dragItems = document.querySelectorAll('.drag-item');
        const dropZone = document.getElementById('dropZone');

        // ড্র্যাগ শুরু ইভেন্ট
        dragItems.forEach(item => {
            item.addEventListener('dragstart', function(event) {
                event.dataTransfer.setData('text/plain', event.target.id); // ডেটা সংরক্ষণ
            });
        });

        // ড্রপ টার্গেটে প্রবেশ করলে
        dropZone.addEventListener('dragover', function(event) {
            event.preventDefault();  // ড্রপ অনুমোদন
            event.stopPropagation();
        });

        // ড্রপ ইভেন্ট
        dropZone.addEventListener('drop', function(event) {
            event.preventDefault();
            event.stopPropagation();
            
            const data = event.dataTransfer.getData('text/plain');
            const draggedElement = document.getElementById(data);
            
            dropZone.appendChild(draggedElement); // ড্র্যাগড আইটেমটিকে ড্রপ জোনে যোগ করা
            draggedElement.style.backgroundColor = '#e0e0e0'; // আইটেমের ব্যাকগ্রাউন্ড রং পরিবর্তন
        });
    </script>

</body>
</html>

কোড ব্যাখ্যা

draggable="true": এই অ্যাট্রিবিউটটি HTML উপাদানটি ড্র্যাগ করা সম্ভব করে তোলে।
dragstart: যখন আপনি একটি আইটেম টেনে নেওয়া শুরু করবেন, তখন এটি ট্রিগার হয়। এখানে dataTransfer.setData ব্যবহৃত হচ্ছে, যা ড্র্যাগ করা আইটেমটির তথ্য (যেমন আইডি) সংরক্ষণ করে।
dragover: ড্রপ টার্গেটের উপর আইটেমটিকে টেনে আনার সময় এটি ট্রিগার হয়। এটি event.preventDefault() কল করতে বাধ্য করে, যাতে ড্রপ করার অনুমতি দেওয়া হয়।
drop: ড্র্যাগ করা আইটেমটি সঠিক স্থানে ড্রপ করলে এটি ট্রিগার হয়। এখানে, dataTransfer.getData ব্যবহার করে আমরা আইটেমের তথ্য বের করি এবং তারপর সেই আইটেমটি ড্রপ জোনে সংযুক্ত করি।

Drag and Drop API এর সুবিধা

ইন্টারঅ্যাকটিভ UI: ব্যবহারকারী ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে।
ডেটা ট্রান্সফার: ড্র্যাগ এবং ড্রপ ফিচারটি ডেটা ট্রান্সফার করতে ব্যবহৃত হতে পারে, যেমন ফাইল আপলোড বা তালিকা পুনর্বিন্যাস করা।
রিয়েল-টাইম ইন্টারঅ্যাকশন: ব্যবহারকারী রিয়েল-টাইমে তাদের কাজ করতে পারে, যেমন তালিকার আইটেম পরিবর্তন করা বা ড্র্যাগ করা উপাদানগুলির অবস্থান পরিবর্তন করা।

HTML5 এর Drag and Drop API একটি শক্তিশালী এবং সহজে ব্যবহারযোগ্য টুল যা ওয়েব পেজের ইন্টারঅ্যাকটিভিটি বাড়াতে সাহায্য করে। এটি একটি স্বচ্ছন্দ এবং আকর্ষণীয় ব্যবহারকারী অভিজ্ঞতা প্রদান করে, বিশেষ করে যেখানে ড্র্যাগ এবং ড্রপের মাধ্যমে উপাদান স্থানান্তর বা পরিবর্তন করার প্রয়োজন। এটি ডেটা ট্রান্সফার, তালিকা পুনর্বিন্যাস, ফাইল আপলোড, এবং আরও অনেক প্রাসঙ্গিক কাজে ব্যবহৃত হতে পারে।

সারাংশ:

HTML5 Drag and Drop API ড্র্যাগ এবং ড্রপ ইভেন্টের মাধ্যমে রিয়েল-টাইম ইন্টারঅ্যাকশন প্রদান করে।
এটি ইউজার ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
বিভিন্ন ধাপ ও ইভেন্টের মাধ্যমে ড্র্যাগ এবং ড্রপ কার্যকারিতা কাস্টমাইজ করা যায়।

Content added By

SATT Academy

HTML5 এর মাধ্যমে ড্র্যাগ এবং ড্রপ ইন্টারঅ্যাকশন তৈরি

303

HTML5-এ ড্র্যাগ এবং ড্রপ (Drag and Drop) ইন্টারঅ্যাকশন তৈরি করা সম্ভব, যা ব্যবহারকারীদের উপাদান বা আইটেমগুলিকে একটি এলিমেন্ট থেকে অন্য এলিমেন্টে সরানোর অনুমতি দেয়। এই ইন্টারঅ্যাকশনটি বিভিন্ন ধরনের ইউজার ইন্টারফেস অ্যাপ্লিকেশন তৈরি করতে সহায়ক হতে পারে, যেমন: ফাইল আপলোড, লিস্ট অর্ডার পরিবর্তন, ইত্যাদি।

HTML5 ড্র্যাগ এবং ড্রপ API (Application Programming Interface) ব্যবহার করে, আপনি ওয়েব পেজে ড্র্যাগেবল উপাদান তৈরি করতে পারেন এবং সেগুলি নির্দিষ্ট গন্তব্যে ড্রপ করতে পারেন।

১. ড্র্যাগ এবং ড্রপ API এর মূল উপাদান

HTML5 ড্র্যাগ এবং ড্রপ API তিনটি মূল উপাদানকে অন্তর্ভুক্ত করে:

draggable অ্যাট্রিবিউট: এটি উপাদানকে ড্র্যাগযোগ্য করতে ব্যবহৃত হয়।
dragstart ইভেন্ট: ড্র্যাগের প্রক্রিয়া শুরু হওয়ার সময় এটি ট্রিগার হয়।
dragover ইভেন্ট: ড্র্যাগড উপাদান যখন লক্ষ্য স্থানে আসে, তখন এটি ট্রিগার হয়।
drop ইভেন্ট: ড্র্যাগড উপাদান যখন লক্ষ্য স্থানে ড্রপ হয়, তখন এটি ট্রিগার হয়।
dragend ইভেন্ট: ড্র্যাগ প্রক্রিয়া সম্পন্ন হওয়ার পর এটি ট্রিগার হয়।

২. ড্র্যাগ এবং ড্রপ কার্যকারিতা তৈরি করার জন্য কোড উদাহরণ

এখানে একটি সাধারণ উদাহরণ দেওয়া হলো, যেখানে একটি ড্র্যাগযোগ্য উপাদান একটি নির্দিষ্ট এলাকায় ড্রপ করা হয়।

HTML:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ড্র্যাগ এবং ড্রপ</title>
    <style>
        #dragItem {
            width: 150px;
            height: 150px;
            background-color: lightblue;
            text-align: center;
            line-height: 150px;
            margin: 10px;
            cursor: move;
        }

        #dropArea {
            width: 300px;
            height: 300px;
            border: 2px dashed #aaa;
            text-align: center;
            line-height: 300px;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <div id="dragItem" draggable="true">
        ড্র্যাগ করুন
    </div>

    <div id="dropArea">
        এখানে ড্রপ করুন
    </div>

    <script>
        // ড্র্যাগgable এলিমেন্ট
        const dragItem = document.getElementById("dragItem");

        // ড্রপ এরিয়া
        const dropArea = document.getElementById("dropArea");

        // ড্র্যাগ শুরু হলে
        dragItem.addEventListener("dragstart", function(event) {
            // ড্র্যাগ করা আইটেমের তথ্য সেট করা
            event.dataTransfer.setData("text", event.target.id);
        });

        // ড্রপ এরিয়া তে ড্র্যাগড আইটেমের উপর হোভার করলে
        dropArea.addEventListener("dragover", function(event) {
            // ডিফল্ট আচরণ (যতটুকু সম্ভব) প্রতিরোধ করা
            event.preventDefault();
        });

        // ড্রপ করার পরে
        dropArea.addEventListener("drop", function(event) {
            event.preventDefault();
            
            // ড্র্যাগড আইটেমের ID পাওয়া
            const data = event.dataTransfer.getData("text");

            // আইটেমটিকে ড্রপ এরিয়াতে অ্যাপেন্ড করা
            const draggedElement = document.getElementById(data);
            dropArea.appendChild(draggedElement);
            
            // ড্র্যাগড আইটেমকে নতুন অবস্থানে নিয়ে আসা
            draggedElement.style.marginTop = "0";
            draggedElement.style.marginLeft = "0";
            draggedElement.style.position = "relative";
        });
    </script>

</body>
</html>

৩. কোড ব্যাখ্যা:

ড্র্যাগgable উপাদান:
- draggable="true" অ্যাট্রিবিউটের মাধ্যমে, #dragItem ডিভটি ড্র্যাগযোগ্য করা হয়েছে।
dragstart ইভেন্ট:
- যখন ড্র্যাগ প্রক্রিয়া শুরু হয়, dragstart ইভেন্ট ট্রিগার হয়। এখানে, আমরা event.dataTransfer.setData() ব্যবহার করে ড্র্যাগ করা আইটেমের তথ্য সংরক্ষণ করছি (এখানে আইটেমের id)।
dragover ইভেন্ট:
- যখন ড্র্যাগড আইটেমটি ড্রপ এরিয়াতে চলে আসে, তখন dragover ইভেন্টটি ট্রিগার হয়। এটি event.preventDefault() এর মাধ্যমে ডিফল্ট আচরণ (যেমন, ড্রপ করা যাবে না) প্রতিরোধ করে ড্রপ করার অনুমতি দেয়।
drop ইভেন্ট:
- ড্র্যাগড আইটেমটি ড্রপ এরিয়াতে ড্রপ হলে, drop ইভেন্টটি ট্রিগার হয়। আমরা এখানে ড্র্যাগড আইটেমের id পুনরুদ্ধার করি এবং dropArea-তে অ্যাপেন্ড করি।
স্টাইলিং:
- #dragItem এবং #dropArea এর জন্য কিছু প্রাথমিক স্টাইলিং দেওয়া হয়েছে যাতে ড্র্যাগ এবং ড্রপ পরিষ্কারভাবে দেখা যায়।

৪. ড্র্যাগ এবং ড্রপ ব্যবহারের উপকারিতা:

ইউজার ইন্টারফেসে উন্নতি: ড্র্যাগ এবং ড্রপ ইন্টারঅ্যাকশন ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং সজ্জনযোগ্য অভিজ্ঞতা তৈরি করে, বিশেষ করে ফাইল ম্যানেজমেন্ট, তালিকা অর্ডারিং, ইত্যাদি ক্ষেত্রে।
রিয়েল-টাইম সিস্টেম: এটি ফাইল আপলোড, চ্যাট বা টাস্ক ম্যানেজমেন্ট অ্যাপ্লিকেশনগুলির মতো সিস্টেমে রিয়েল-টাইম ডেটা আপডেট করার জন্য ব্যবহার করা যেতে পারে।
অ্যাক্সেসিবিলিটি: ব্যবহারকারীরা সহজেই এলিমেন্টগুলিকে স্থানান্তর করতে পারেন, যা তাদের কাজকে আরও সোজা এবং দ্রুত করে তোলে।

HTML5 এর ড্র্যাগ এবং ড্রপ API একটি শক্তিশালী টুল যা আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনগুলিতে ইন্টারেকটিভ এবং ব্যবহারকারী-বান্ধব ফিচার যোগ করার সুযোগ দেয়। এটি ড্র্যাগেবল উপাদান এবং ড্রপ এরিয়া তৈরি করার মাধ্যমে বিভিন্ন ধরনের অ্যাপ্লিকেশন যেমন ফাইল আপলোড, লিস্ট ম্যানেজমেন্ট, ইত্যাদি তৈরি করতে সহায়ক।

সারাংশ: HTML5 ড্র্যাগ এবং ড্রপ API ব্যবহার করে আপনি ইন্টারেকটিভ ওয়ার্কফ্লো এবং ইউজার ইন্টারফেস ডিজাইন করতে পারেন, যা ব্যবহারকারীদের জন্য সহজ এবং কার্যকরী অভিজ্ঞতা প্রদান করে।

Content added By

SATT Academy

Draggable Elements এবং Droppable Zones তৈরি করা

336

HTML5 এ drag এবং drop ইভেন্টের মাধ্যমে আপনি পেজের উপাদানগুলিকে ড্র্যাগ (টেনে নেওয়া) এবং ড্রপ (ছেড়ে দেওয়া) করতে পারেন। এই বৈশিষ্ট্যটি ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ, ড্র্যাগ-এন্ড-ড্রপ ইন্টারফেস তৈরি করতে পারবেন, যেমন ফাইল আপলোড, অর্ডার পরিবর্তন, বা গেমে উপাদান সরানো।

HTML5 এর draggable অ্যাট্রিবিউট এবং JavaScript-এর dragstart, dragover, drop ইভেন্টগুলি ব্যবহার করে আপনি এই কার্যক্রমগুলি সম্পাদন করতে পারবেন।

১. Draggable Elements তৈরি করা

প্রথমে, HTML এ একটি উপাদান তৈরি করা হবে যা ড্র্যাগ করা যাবে। HTML5-এ, draggable অ্যাট্রিবিউট ব্যবহার করে কোনও উপাদানকে ড্র্যাগgable (ড্র্যাগ করা সম্ভব) করা যায়।

১.১. Draggable এলিমেন্ট তৈরি করা

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable Elements এবং Droppable Zones</title>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            border: 2px solid #000;
            cursor: grab;
        }

        .droppable {
            width: 300px;
            height: 300px;
            margin-top: 50px;
            background-color: lightgrey;
            border: 2px dashed #000;
            position: relative;
        }
    </style>
</head>
<body>

    <div id="drag1" class="draggable" draggable="true">টেনে নিন</div>

    <div id="dropZone" class="droppable">এখানে ড্রপ করুন</div>

    <script>
        // Draggable element
        const draggable = document.getElementById('drag1');
        const dropZone = document.getElementById('dropZone');

        // Draggable element শুরু করা
        draggable.addEventListener('dragstart', function(event) {
            // Dragging শুরু হওয়া অবস্থায় dataTransfer ব্যবহার করা হয়
            event.dataTransfer.setData('text', event.target.id);
        });

        // Droppable zone এর ওপর dragover ইভেন্ট হ্যান্ডলার
        dropZone.addEventListener('dragover', function(event) {
            // Default action ব্লক করা
            event.preventDefault();
        });

        // Droppable zone এ drop ইভেন্ট হ্যান্ডলার
        dropZone.addEventListener('drop', function(event) {
            event.preventDefault();
            const data = event.dataTransfer.getData('text');
            const draggableElement = document.getElementById(data);
            dropZone.appendChild(draggableElement);  // ড্র্যাগ করা এলিমেন্ট ড্রপ জোনে যুক্ত হবে
        });
    </script>
</body>
</html>

ব্যাখ্যা:

Draggable এলিমেন্ট: draggable="true" অ্যাট্রিবিউট দিয়ে আমরা একটি div তৈরি করেছি, যা ড্র্যাগ করা যাবে।
Dragstart ইভেন্ট: যখন ব্যবহারকারী ড্র্যাগ শুরু করেন, তখন dragstart ইভেন্ট ট্রিগার হয়। এখানে event.dataTransfer.setData() ব্যবহার করে ড্র্যাগ করা উপাদানের তথ্য সেট করা হয়।
Dragover ইভেন্ট: এটি ড্রপ জোনের উপর ড্র্যাগ করা উপাদানটি মুভ করার সময় হ্যান্ডেল করা হয়। event.preventDefault() ব্যবহার করে ডিফল্ট আচরণ ব্লক করা হয়, যাতে ড্রপ করার অনুমতি দেওয়া হয়।
Drop ইভেন্ট: ড্র্যাগ করা উপাদানটি ড্রপ জোনে ড্রপ করার সময় drop ইভেন্ট কার্যকর হয় এবং event.dataTransfer.getData() দিয়ে ড্র্যাগ করা উপাদানটি পুনরুদ্ধার করে সেটি ড্রপ জোনে যুক্ত করা হয়।

২. Droppable Zones তৈরি করা

ড্র্যাগ করা উপাদানগুলো এক বা একাধিক ড্রপ জোনে ড্রপ করা যাবে। এই ড্রপ জোনগুলো সাধারণত কোন নির্দিষ্ট এলাকা বা জায়গা হতে পারে যেখানে ড্র্যাগ করা উপাদানটি রাখার জন্য অনুমতি দেওয়া হয়।

২.১. Droppable Zone তৈরি করা

<div id="drag1" class="draggable" draggable="true">টেনে নিন</div>

<div id="dropZone1" class="droppable">জোন ১</div>
<div id="dropZone2" class="droppable">জোন ২</div>

এখানে দুটি আলাদা ড্রপ জোন তৈরি করা হয়েছে (dropZone1 এবং dropZone2)। ড্র্যাগ করা উপাদান যেকোনো একটি জোনে ড্রপ করা যেতে পারে।

২.২. একাধিক Droppable Zone নিয়ে কাজ করা

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Droppable Zones</title>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            border: 2px solid #000;
            cursor: grab;
        }

        .droppable {
            width: 300px;
            height: 300px;
            margin-top: 50px;
            background-color: lightgrey;
            border: 2px dashed #000;
            position: relative;
            display: inline-block;
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <div id="drag1" class="draggable" draggable="true">টেনে নিন</div>

    <div id="dropZone1" class="droppable">জোন ১</div>
    <div id="dropZone2" class="droppable">জোন ২</div>

    <script>
        // Draggable element
        const draggable = document.getElementById('drag1');
        const dropZones = document.querySelectorAll('.droppable');

        // Draggable element শুরু করা
        draggable.addEventListener('dragstart', function(event) {
            event.dataTransfer.setData('text', event.target.id);
        });

        // প্রতিটি Droppable Zone এর জন্য dragover এবং drop ইভেন্ট হ্যান্ডলার
        dropZones.forEach(dropZone => {
            dropZone.addEventListener('dragover', function(event) {
                event.preventDefault();
            });

            dropZone.addEventListener('drop', function(event) {
                event.preventDefault();
                const data = event.dataTransfer.getData('text');
                const draggableElement = document.getElementById(data);
                dropZone.appendChild(draggableElement);
            });
        });
    </script>
</body>
</html>

ব্যাখ্যা:

একাধিক Droppable Zones: আমরা দুটি droppable এলিমেন্ট তৈরি করেছি, যেখানে draggable এলিমেন্টটি ড্রপ করা যেতে পারে।
একই কোডের মাধ্যমে একাধিক ড্রপ জোনে ড্র্যাগ করা উপাদানটি ড্রপ করা: querySelectorAll('.droppable') ব্যবহার করে সমস্ত ড্রপ জোন নির্বাচন করা হয়েছে এবং তাদের উপর dragover এবং drop ইভেন্ট হ্যান্ডলিং করা হয়েছে।

৩. অতিরিক্ত কাস্টমাইজেশন

স্টাইলিং: ড্র্যাগ করা এবং ড্রপ করা এলিমেন্টগুলির স্টাইল পরিবর্তন করা যেতে পারে, যেমন ড্র্যাগ করা হলে উপাদানটি আলাদা রঙে দেখানো বা ড্রপ জোনের হাইলাইট করা।
ফাইল আপলোড: আপনি ড্র্যাগ করে ফাইল ড্রপ করার জন্য ফাইল আপলোডের ব্যবস্থা করতে পারেন, যা সাধারণত একটি input[type="file"] ফিচারের বিকল্প হিসেবে ব্যবহৃত হয়।
অর্ডার পরিবর্তন: একটি লিস্টের আইটেমগুলোর অর্ডার পরিবর্তন করার জন্যও এই drag and drop প্রক্রিয়া ব্যবহার করা যায়।

drag এবং drop ইভেন্টগুলি HTML5-এর শক্তিশালী বৈশিষ্ট্য, যা সহজে ইন্টারঅ্যাকটিভ এবং রিয়েল-টাইম ইন্টারফেস তৈরি করতে সহায়ক। ড্র্যাগেবল উপাদান এবং ড্রপ জোন তৈরি করে, আপনি বিভিন্ন ধরনের অ্যাপ্লিকেশন, যেমন ফাইল আপলোড, ড্যাশবোর্ড ইন্টারঅ্যাকশন, এবং ড্র্যাগ-এন্ড-ড্রপ গেম তৈরি করতে পারবেন। JavaScript দিয়ে এর কার্যকারিতা কাস্টমাইজ করা সম্ভব।

সারাংশ:

draggable অ্যাট্রিব

িউট এবং drag ও drop ইভেন্টের মাধ্যমে সহজেই ড্র্যাগ এবং ড্রপ ফিচার তৈরি করা যায়।

একাধিক ড্রপ জোন ব্যবহার করে বিভিন্ন কন্টেন্ট বা উপাদান ড্র্যাগ করে সরানো সম্ভব।
এই ফিচারটি উন্নত ইউজার ইন্টারফেস এবং UX তৈরি করতে সহায়ক।

Content added By

SATT Academy

Drag Events এবং Drop Events হ্যান্ডল করা

276

Drag and Drop ইন্টারফেস হল এমন একটি ইন্টারঅ্যাকশন, যার মাধ্যমে ব্যবহারকারীরা একটি আইটেমকে (যেমন, ফাইল, ডিভ, বা টেক্সট) একটি স্থান থেকে অন্য স্থানে "ড্র্যাগ" এবং "ড্রপ" করতে পারে। HTML5 এ ড্র্যাগ এবং ড্রপ ইভেন্টগুলির জন্য নির্দিষ্ট ইভেন্টগুলি রয়েছে, যা ব্যবহারকারী ইন্টারঅ্যাকশনকে সঠিকভাবে ট্র্যাক এবং পরিচালনা করতে সাহায্য করে।

এই ইভেন্টগুলির মধ্যে প্রধান ইভেন্টগুলি হল:

dragstart: যখন একটি ড্র্যাগ অপারেশন শুরু হয়।
dragend: যখন ড্র্যাগ অপারেশন শেষ হয়।
dragover: যখন একটি ড্র্যাগged আইটেম কোনও এলিমেন্টের উপরে চলে আসে।
dragenter: যখন একটি ড্র্যাগged আইটেম একটি ড্রপ টার্গেটের উপর চলে আসে।
dragleave: যখন একটি ড্র্যাগged আইটেম একটি ড্রপ টার্গেটের বাইরে চলে যায়।
drop: যখন একটি ড্র্যাগged আইটেম ড্রপ টার্গেটের উপর ড্রপ করা হয়।
dragenter এবং dragleave: ড্র্যাগged আইটেমের অবস্থান পরিবর্তনের জন্য ব্যবহৃত হয়।

ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং - ধাপগুলো

ড্র্যাগ ইভেন্ট:
- ড্র্যাগ শুরু হওয়ার পর বিভিন্ন ইভেন্টগুলি যেমন dragstart, dragover, dragenter, এবং dragleave ট্রিগার হয়।
- dragstart ইভেন্টের মধ্যে আমরা ড্র্যাগged আইটেমটির ডেটা বা স্টেট সেট করতে পারি।
ড্রপ ইভেন্ট:
- ড্র্যাগged আইটেমটি ড্রপ করার জন্য drop ইভেন্টটি ব্যবহার করা হয়।
- dragover ইভেন্টে আমরা ড্রপ টার্গেটের জন্য event.preventDefault() কল করে ড্রপ করার অনুমতি প্রদান করি।

ধাপে ধাপে উদাহরণ

এখানে একটি সিম্পল ড্র্যাগ এবং ড্রপ অ্যাপ্লিকেশন তৈরি করা হয়েছে, যেখানে একটি ডিভ (div) এলিমেন্টকে একটি নির্দিষ্ট জায়গায় ড্র্যাগ এবং ড্রপ করা হয়।

HTML - Drag and Drop Interface

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <style>
        #dragItem {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            text-align: center;
            line-height: 100px;
            cursor: move;
            margin: 20px;
        }

        #dropZone {
            width: 300px;
            height: 300px;
            border: 2px dashed #333;
            text-align: center;
            line-height: 300px;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <div id="dragItem" draggable="true">ড্র্যাগ করুন</div>
    <div id="dropZone">এখানে ড্রপ করুন</div>

    <script>
        const dragItem = document.getElementById("dragItem");
        const dropZone = document.getElementById("dropZone");

        // dragstart ইভেন্ট হ্যান্ডল করা
        dragItem.addEventListener("dragstart", function(event) {
            // ড্র্যাগged আইটেমের ডেটা সেট করা
            event.dataTransfer.setData("text", event.target.id);
            console.log("ড্র্যাগ শুরু হয়েছে");
        });

        // dragover ইভেন্ট হ্যান্ডল করা (ড্রপ টার্গেটে ড্র্যাগged আইটেমের উপর)
        dropZone.addEventListener("dragover", function(event) {
            event.preventDefault(); // ড্রপ করার অনুমতি দেওয়া
            console.log("ড্র্যাগ করা হচ্ছে");
        });

        // dragenter ইভেন্ট হ্যান্ডল করা (ড্রপ টার্গেটে আইটেম প্রবেশ করছে)
        dropZone.addEventListener("dragenter", function(event) {
            console.log("ড্র্যাগged আইটেম ড্রপ টার্গেটে প্রবেশ করছে");
        });

        // dragleave ইভেন্ট হ্যান্ডল করা (ড্রপ টার্গেট থেকে আইটেম বের হয়ে যাচ্ছে)
        dropZone.addEventListener("dragleave", function(event) {
            console.log("ড্র্যাগged আইটেম ড্রপ টার্গেট থেকে বের হয়ে যাচ্ছে");
        });

        // drop ইভেন্ট হ্যান্ডল করা (ড্র্যাগged আইটেম ড্রপ করা হচ্ছে)
        dropZone.addEventListener("drop", function(event) {
            event.preventDefault(); // ডিফল্ট আচরণ বন্ধ করা
            const data = event.dataTransfer.getData("text"); // ড্র্যাগged আইটেমের ডেটা পুনরুদ্ধার করা
            const draggedElement = document.getElementById(data);
            dropZone.appendChild(draggedElement); // ড্রপ করা আইটেমকে ড্রপ টার্গেটে যুক্ত করা
            console.log("ড্রপ করা হয়েছে");
        });
    </script>
</body>
</html>

ব্যাখ্যা:

draggable="true":
- এটি নির্দেশ করে যে, #dragItem ডিভটি ড্র্যাগযোগ্য।
dragstart ইভেন্ট:
- যখন ব্যবহারকারী ড্র্যাগিং শুরু করেন, তখন dragstart ইভেন্ট ট্রিগার হয়। এখানে event.dataTransfer.setData() ব্যবহার করে ড্র্যাগged আইটেমের আইডি সেট করা হয়েছে।
dragover ইভেন্ট:
- ড্র্যাগged আইটেম যখন ড্রপ টার্গেটের উপরে চলে আসে, তখন dragover ইভেন্টটি ট্রিগার হয়। এটি ড্রপ করার অনুমতি দেয় (এবং ডিফল্ট আচরণ নিষিদ্ধ করে event.preventDefault() কল করা হয়)।
dragenter এবং dragleave ইভেন্ট:
- dragenter ইভেন্টটি ট্রিগার হয় যখন ড্র্যাগged আইটেম ড্রপ টার্গেটে প্রবেশ করে এবং dragleave ট্রিগার হয় যখন এটি ড্রপ টার্গেট থেকে বেরিয়ে যায়।
drop ইভেন্ট:
- যখন ব্যবহারকারী ড্র্যাগged আইটেমটি ড্রপ টার্গেটে রাখেন, তখন drop ইভেন্টটি ট্রিগার হয়। এখানে event.dataTransfer.getData() ব্যবহার করে ড্র্যাগged আইটেমের আইডি পুনরুদ্ধার করা হয় এবং তারপর তা ড্রপ টার্গেটে যুক্ত করা হয়।

উন্নত বৈশিষ্ট্য:

বিভিন্ন ধরনের ডেটা সমর্থন:
- আপনি setData() এবং getData() ব্যবহার করে বিভিন্ন ধরনের ডেটা (যেমন, টেক্সট, ছবি বা অন্যান্য) ট্রান্সফার করতে পারেন।
Custom Styling:
- ড্র্যাগged আইটেমের অবস্থান বা প্রক্রিয়ায় কাস্টম স্টাইলিং যোগ করা সম্ভব, যেমন ড্র্যাগgingের সময় আইটেমের দৃশ্যমানতা পরিবর্তন করা।

ড্র্যাগ এবং ড্রপ ইভেন্টগুলি ব্যবহার করে আপনি ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করতে পারেন। এই ইভেন্টগুলো Web API এর অংশ এবং ওয়েব অ্যাপ্লিকেশনগুলিতে ড্র্যাগgable উপাদানগুলি পরিচালনা করার জন্য ব্যবহৃত হয়। HTML5 এবং JavaScript এর মাধ্যমে এগুলি সহজেই বাস্তবায়িত করা যায়।

সারাংশ:

dragstart, dragover, dragenter, dragleave, এবং drop ইভেন্টগুলি ড্র্যাগ এবং ড্রপ অপারেশন চালাতে ব্যবহৃত হয়।
ব্যবহারকারীকে ড্র্যাগ এবং ড্রপ ফিচার সরবরাহ করার মাধ্যমে ইন্টারেক্টিভ ওয়েব পৃষ্ঠা তৈরি করা সম্ভব।

Content added By

SATT Academy

Custom Drag and Drop এর জন্য CSS এবং JavaScript ব্যবহার

305

Drag and Drop হলো এমন একটি ইন্টারেক্টিভ ফিচার যেখানে ব্যবহারকারী একটি আইটেম (যেমন একটি ফাইল, ছবি, বা অন্য কোনো উপাদান) টেনে নিয়ে অন্য জায়গায় ফেলতে পারে। এই ফিচারটি সাধারণত ব্যবহারকারী ইন্টারফেসে (UI) ইন্টারঅ্যাক্টিভ কার্যক্রমের জন্য ব্যবহৃত হয়। HTML5-এ drag and drop API রয়েছে, তবে আমরা এখানে কাস্টম Drag and Drop তৈরির জন্য CSS এবং JavaScript ব্যবহার করে দেখাবো।

১. Drag and Drop-এর মূল ধারণা

Drag and Drop-এর জন্য দুটি প্রধান উপাদান প্রয়োজন:

ড্র্যাগ করা উপাদান (Draggable Element): এটি এমন একটি উপাদান হবে যা ব্যবহারকারী টেনে নিয়ে যাবে।
ড্রপ জোন (Drop Zone): এটি এমন একটি এলাকা হবে যেখানে ড্র্যাগ করা উপাদানটি ফেলা হবে।

২. HTML কন্টেন্ট

এখানে একটি সহজ HTML কাঠামো তৈরি করা হলো, যেখানে আমরা দুটি উপাদান তৈরি করেছি। একটি উপাদান থাকবে যা ড্র্যাগ করা হবে, এবং একটি এলাকা থাকবে যেখানে সেই উপাদানটি ড্রপ করা যাবে।

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Custom Drag and Drop</title>
    <style>
        #dragElement {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            border: 1px solid #333;
            cursor: grab;
        }

        #dropZone {
            width: 200px;
            height: 200px;
            margin-top: 20px;
            border: 2px dashed #ccc;
            text-align: center;
            line-height: 200px;
            color: #888;
        }

        #dropZone.hover {
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <div id="dragElement" draggable="true">
        টেনে নিন
    </div>
    <div id="dropZone">
        এখানে ফেলুন
    </div>

    <script>
        // ড্র্যাগ এলিমেন্ট এবং ড্রপ জোন সিলেক্ট করা
        const dragElement = document.getElementById('dragElement');
        const dropZone = document.getElementById('dropZone');

        // ড্র্যাগ স্টার্ট
        dragElement.addEventListener('dragstart', (event) => {
            // ড্র্যাগ আইটেমের ডাটা সেট করা
            event.dataTransfer.setData('text', event.target.id);
            event.target.style.opacity = 0.5;  // ড্র্যাগ আইটেমের অপাসিটি কমানো
        });

        // ড্র্যাগ এনড (ড্র্যাগিং শেষ হলে)
        dragElement.addEventListener('dragend', (event) => {
            event.target.style.opacity = 1;  // অপাসিটি আবার ১ করা
        });

        // ড্রপ জোনে ড্র্যাগ ওভার ইভেন্ট
        dropZone.addEventListener('dragover', (event) => {
            event.preventDefault();  // ডিফল্ট আচরণ বন্ধ করা (যেহেতু ড্রপ সম্ভব নয়)
            dropZone.classList.add('hover');  // ড্রপ জোনের জন্য স্টাইল যোগ করা
        });

        // ড্রপ জোনে ড্রপ
        dropZone.addEventListener('drop', (event) => {
            event.preventDefault();
            const data = event.dataTransfer.getData('text');  // ড্র্যাগ করা আইটেমের ডেটা আনা
            const draggedElement = document.getElementById(data);  // ড্র্যাগ করা আইটেম সিলেক্ট করা
            dropZone.appendChild(draggedElement);  // ড্র্যাগ করা আইটেমকে ড্রপ জোনে অ্যাপেন্ড করা
            dropZone.classList.remove('hover');  // ড্রপ জোনের স্টাইল রিমুভ করা
        });

        // ড্রপ জোনের বাইরে থেকে ড্র্যাগ হবার সময় স্টাইল পরিবর্তন
        dropZone.addEventListener('dragleave', (event) => {
            dropZone.classList.remove('hover');
        });
    </script>
</body>
</html>

৩. কোড ব্যাখ্যা

HTML:
- #dragElement হচ্ছে এমন একটি এলিমেন্ট যেটি ড্র্যাগ করা যাবে, এর জন্য draggable="true" অ্যাট্রিবিউট ব্যবহার করা হয়েছে।
- #dropZone একটি এলাকা যেখানে ড্র্যাগ করা আইটেমটি ড্রপ হবে। এই এলিমেন্টটি স্টাইলের মাধ্যমে একটি ড্যাশড বর্ডার দিয়ে চিহ্নিত করা হয়েছে।
CSS:
- #dragElement: এই এলিমেন্টের স্টাইল রয়েছে যাতে এটি একটি ব্লক আকারে প্রদর্শিত হয় এবং cursor: grab; স্টাইলটি ব্যবহারকারীকে ড্র্যাগিং ইন্টারঅ্যাকশনের জন্য নির্দেশ দেয়।
- #dropZone: এটি একটি বড় এলাকা যা ড্রপ জোন হিসেবে কাজ করবে, এবং hover ক্লাস যুক্ত হলে এর ব্যাকগ্রাউন্ডের রঙ পরিবর্তন হবে।
JavaScript:
- dragstart: এই ইভেন্টে আমরা ড্র্যাগ করা আইটেমের id ডেটা হিসেবে সেট করি, যাতে পরে সেটি সহজেই রিটারিভ করা যায়। এছাড়া ড্র্যাগ শুরু হলে আইটেমের অপাসিটি কমিয়ে দেওয়া হয়।
- dragend: ড্র্যাগ শেষ হলে আইটেমের অপাসিটি আবার স্বাভাবিক অবস্থায় ফিরে আসে।
- dragover: এই ইভেন্টে ডিফল্ট আচরণ বন্ধ করতে হয়, কারণ ব্রাউজার ডিফল্টভাবে একটি ড্রপ নিষিদ্ধ অবস্থায় রাখে। এছাড়া, ড্রপ জোনে একটি ক্লাস যোগ করা হয় যাতে ইন্টারঅ্যাকশন আরও ভিজ্যুয়াল হয়।
- drop: এখানে, ড্র্যাগ করা আইটেমের ডেটা getData মাধ্যমে রিট্রিভ করা হয় এবং সেটি ড্রপ জোনে অ্যাপেন্ড করা হয়।
- dragleave: ড্র্যাগ এলিমেন্ট যদি ড্রপ জোনের বাইরে চলে যায়, তাহলে hover ক্লাসটি সরানো হয়।

৪. বৈশিষ্ট্য এবং ব্যবহার

CSS দিয়ে Customizing:
- আপনি CSS দিয়ে ড্র্যাগ এবং ড্রপ এলিমেন্টগুলোর স্টাইল কাস্টমাইজ করতে পারেন, যেমন তাদের আকার, রঙ, এবং হোভার প্রভাব।
- ড্রপ জোনের ভিজ্যুয়াল ইফেক্ট যেমন border, background-color, বা opacity পরিবর্তন করে ব্যবহারকারীকে নির্দেশ দিতে পারেন যে এটি একটি ড্রপ জোন।
JavaScript দিয়ে আরও ফিচার যোগ করা:
- Multiple Items: আপনি যদি একাধিক আইটেম ড্র্যাগ এবং ড্রপ করতে চান, তবে প্রতিটি ড্র্যাগ আইটেমের জন্য আলাদা id এবং dataTransfer ব্যবহার করতে হবে।
- ব্যবহারকারীকে বার্তা দেওয়া: আপনি যখন আইটেম সফলভাবে ড্রপ করবেন, তখন ব্যবহারকারীকে একটি বার্তা দেখানোর জন্য alert() বা ডাইনামিক বার্তা প্রদান করতে পারেন।
- ড্র্যাগ আইটেমের অবস্থান পরিবর্তন: আপনি ড্র্যাগ করা আইটেমের অবস্থানেও পরিবর্তন আনতে পারেন, যেমন এটি স্ক্রীনে কোথায় অবস্থান করছে, এর সাথেও ইন্টারঅ্যাকশন যুক্ত করা যেতে পারে।

Custom Drag and Drop ইন্টারফেস তৈরি করা CSS এবং JavaScript দিয়ে খুবই সহজ। এখানে দেখানো হয়েছে কিভাবে একটি সিম্পল ড্র্যাগ এবং ড্রপ ফিচার তৈরি করা যায়, যা আপনি আপনার প্রকল্পে কাস্টমাইজ করতে পারেন। CSS ব্যবহার করে আপনি এর ভিজ্যুয়াল প্রভাব তৈরি করতে পারেন, এবং JavaScript দিয়ে ব্যবহারকারীর ইন্টারঅ্যাকশন নিয়ে আরও ডাইনামিক ফিচার যোগ করতে পারেন।

সারাংশ:

HTML5 drag and drop API ব্যবহার করে কাস্টম ড্র্যাগ এবং ড্রপ ফিচার তৈরি করা যায়।
CSS দিয়ে UI কাস্টমাইজেশন এবং JavaScript দিয়ে ইন্টারঅ্যাকশনের লজিক তৈরি করা যায়।

Content added By

SATT Academy

HTML5 এর পরিচিতি HTML5 সেটআপ এবং প্রথম ডকুমেন্ট তৈরি HTML5 এর এলিমেন্ট এবং ট্যাগ HTML5 এর হেডিং এবং প্যারাগ্রাফ HTML5 এর লিস্ট এবং টেবিল তৈরি

HTML5 এর Drag and Drop API গাইড ও নোট

Drag and Drop এর মূল ধারণা

Drag and Drop API-এর প্রধান ইভেন্টগুলি

1. dragstart

2. dragend

3. dragover

4. dragenter

5. dragleave

6. drop

Drag and Drop API ব্যবহার করে একটি উদাহরণ

HTML কোড

কোড ব্যাখ্যা

Drag and Drop API এর সুবিধা

HTML5 এর মাধ্যমে ড্র্যাগ এবং ড্রপ ইন্টারঅ্যাকশন তৈরি

১. ড্র্যাগ এবং ড্রপ API এর মূল উপাদান

২. ড্র্যাগ এবং ড্রপ কার্যকারিতা তৈরি করার জন্য কোড উদাহরণ

HTML:

৩. কোড ব্যাখ্যা:

৪. ড্র্যাগ এবং ড্রপ ব্যবহারের উপকারিতা:

Draggable Elements এবং Droppable Zones তৈরি করা

১. Draggable Elements তৈরি করা

১.১. Draggable এলিমেন্ট তৈরি করা

ব্যাখ্যা:

২. Droppable Zones তৈরি করা

২.১. Droppable Zone তৈরি করা

২.২. একাধিক Droppable Zone নিয়ে কাজ করা

ব্যাখ্যা:

৩. অতিরিক্ত কাস্টমাইজেশন

Drag Events এবং Drop Events হ্যান্ডল করা

ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং - ধাপগুলো

ধাপে ধাপে উদাহরণ

HTML - Drag and Drop Interface

ব্যাখ্যা:

উন্নত বৈশিষ্ট্য:

Custom Drag and Drop এর জন্য CSS এবং JavaScript ব্যবহার

১. Drag and Drop-এর মূল ধারণা

২. HTML কন্টেন্ট

৩. কোড ব্যাখ্যা

৪. বৈশিষ্ট্য এবং ব্যবহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!