HTML Drag and Drop API എന്താണ്?
HTML Drag and Drop API ഉപയോഗിച്ച്, ഒരു ഇലിമെന്റിനെ പേജിൽ നിന്ന് വേറൊരു സ്ഥലത്തേക്ക് വലിച്ചിടാൻ (drag) അനുയോജ്യമായ രീതിയിൽ പ്രവർത്തനങ്ങൾ സൃഷ്ടിക്കാം. ഇലിമെന്റുകൾ ആവശ്യമുള്ള സ്ഥലത്തേക്ക് വലിച്ചിടുന്നതിനുള്ള അനുഭവം ഉപയോഗശൂന്യമായ മാർഗമാണ്. ഈ API HTML5-ൽ ഉൾപ്പെടുത്തിയതുകൊണ്ട്, JavaScript ഉപയോഗിച്ച് പേജ് ഇന്ററാക്റ്റിവ് ആക്കാൻ കഴിയും.
Drag and Drop API-യുടെ ഘടകങ്ങൾ:
- Draggable Elements: വലിച്ചിടാനുള്ള ഇലിമെന്റുകൾ (draggable=true).
- Drop Targets: വലിച്ചിടുന്ന ഇലിമെന്റുകൾ എവിടെ എറിയണം (drop zone).
- Events: വലിച്ചിടൽ (drag), തൽക്ഷണത്തിൽ സംഭവിക്കുന്ന ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നു (dragstart, dragover, drop).
Draggable Element സൃഷ്ടിക്കുക:
<p id="drag1" draggable="true">ഇത് ഒരു draggable ഇലിമെന്റാണ്!</p>
Drag and Drop Events Explained:
- dragstart: വലിച്ചിടൽ ആരംഭിക്കുമ്പോൾ നടപ്പിലാക്കുന്നു.
- dragover: വലിച്ചിടൽ അവസാനം വരെ ഒരു ഡ്രോപ്പ് ടാർഗെറ്റിൽ ഉള്ള സമയത്ത് സംഭവിക്കുന്നു.
- drop: ഇലിമെന്റിനെ ഒരു ടാർഗെറ്റിലേക്ക് വലിച്ചിടുമ്പോൾ സംഭവിക്കുന്നു.
Example: Draggable Element with Drop Target:
<!DOCTYPE html>
<html>
<head>
<style>
#drag1 {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 20px;
}
#dropzone {
width: 200px;
height: 200px;
background-color: lightgreen;
border: 2px dashed #000;
}
</style>
</head>
<body>
<p id="drag1" draggable="true">ഇത് വലിക്കാവുന്ന (draggable) ഇലിമെന്റാണ്!</p>
<div id="dropzone">ഈ ബോക്സിലേക്ക് വലിച്ചിടുക.</div>
<script>
const dragItem = document.getElementById("drag1");
const dropZone = document.getElementById("dropzone");
// dragstart event
dragItem.addEventListener("dragstart", function (event) {
event.dataTransfer.setData("text", event.target.id);
});
// dragover event
dropZone.addEventListener("dragover", function (event) {
event.preventDefault(); // allow drop
});
// drop event
dropZone.addEventListener("drop", function (event) {
event.preventDefault();
const data = event.dataTransfer.getData("text");
const draggedElement = document.getElementById(data);
dropZone.appendChild(draggedElement);
});
</script>
</body>
</html>
Example Explanation:
- Draggable Element:
"draggable=true"ആയി സെറ്റ് ചെയ്ത<p>ടാഗ് വലിക്കാവുന്ന ഇലിമെന്റാണ്. - Drop Target:
"dropzone"എന്ന<div>ടാഗ് അതിന്റെ ലക്ഷ്യമാണ് (target), അതിൽ വലിച്ചിടാനാവും. - Events:
- dragstart: വലിക്കാനുള്ള ഇലിമെന്റിനെ തിരിച്ചറിയുകയും, അവിടെ നിന്ന് ഡാറ്റ കൈമാറുകയും ചെയ്യുന്നു.
- dragover: ഒരു ടാർഗെറ്റിൽ ഇലിമെന്റ് കൊണ്ടുവന്നപ്പോൾ തൽക്ഷണ പ്രവർത്തനങ്ങൾ സജ്ജമാക്കുന്നു.
- drop: ഇലിമെന്റ് ടാർഗെറ്റിലേക്ക് ഡ്രോപ്പ് ചെയ്യുമ്പോൾ പൂർണ്ണമായുള്ള പ്രവർത്തനം (append) നടപ്പിലാക്കുന്നു.
Customizing Drag and Drop:
- Changing Cursor While Dragging:സ്റ്റൈൽ CSS ഉപയോഗിച്ച് വലിക്കുന്ന സമയത്ത് മൗസ് കേഴ്സർ മാറ്റാം:cssCopy code
#drag1 { cursor: move; } - Feedback Images (Ghost Image):Custom feedback image നൽകാനും സാധിക്കും, ഇത് വലിക്കുന്ന സമയത്ത് ഉപയോഗിക്കാവുന്ന മാർഗമാണ്:javascriptCopy code
dragItem.addEventListener("dragstart", function (event) { const img = new Image(); img.src = 'path_to_image.png'; // Provide image path event.dataTransfer.setDragImage(img, 10, 10); }); - Drop Effects:dropEffect ഉപയോക്താവിന് എന്ത് നടപടിയാണെന്ന് കാണിക്കാൻ ഉപയോഗിക്കുന്നു (move, copy, link).javascriptCopy code
dropZone.addEventListener("dragover", function (event) { event.preventDefault(); event.dataTransfer.dropEffect = "move"; // Indicate move action });
Handling Different Types of Data:
Drag and Drop API വലിച്ചിടൽ ആവശ്യകതകൾക്ക് അനുയോജ്യമായി ഡാറ്റ കൈമാറ്റം ചെയ്യാൻ കഴിയും, ടെക്സ്റ്റ്, ഫയൽ, URL എന്നിവ ഉൾപ്പെടെ.
dragItem.addEventListener("dragstart", function (event) {
event.dataTransfer.setData("text/plain", "Hello, this is a test data!");
});
dropZone.addEventListener("drop", function (event) {
event.preventDefault();
const data = event.dataTransfer.getData("text");
alert(data); // Displays the transferred text
});
Use Cases of Drag and Drop:
- File Uploads: ഫയലുകൾ വലിച്ചിടലിൽ ഉപയോഗിച്ച് ഫയൽ അപ്‌ലോഡ് ചെയ്യുന്ന സിസ്റ്റങ്ങൾ.
- Task Management (Kanban Boards): ഒരു ടാസ്ക് ഒരു ടാർഗെറ്റിൽ നിന്ന് മറ്റൊരു ടാർഗെറ്റിലേക്ക് വലിച്ചിടുന്ന സംവിധാനം.
- Interactive Games: ഇന്ററാക്ടീവ് ഗെയിമുകളിൽ ഇലിമെന്റുകൾ വലിച്ചിടൽ വഴി കളിയുടെ പ്രവർത്തനം.
- Reordering Lists: ലിസ്റ്റ് ഇനങ്ങൾ ഒരു ക്രമത്തിൽ നിന്നും മറ്റൊന്നിലേക്ക് വലിച്ചിടുന്നതിലൂടെ ക്രമീകരിക്കാൻ.
Limitations of Drag and Drop API:
- Browser Support: എല്ലാ ബ്രൗസറുകളും ഈ API-യെ പരിപൂർണമായി പിന്തുണയ്ക്കുന്നില്ല. പഴയ ബ്രൗസറുകൾക്ക് ചില പ്രശ്നങ്ങൾ ഉണ്ടാകാം.
- Touch Devices: Drag and Drop API ടച്ച്-ബേസ്ഡ് ഡിവൈസുകളിൽ ഇത്തരത്തിലുള്ള ഓപ്റ്റിമൈസേഷൻ സജ്ജമല്ല.
സങ്കലനം:
HTML Drag and Drop API ഉപയോഗിച്ച് വലിച്ചിടുന്ന ഇലിമെന്റുകൾ സൃഷ്ടിച്ച്, സുതാര്യമായ, ഇന്ററാക്ടീവ് അനുഭവം നൽകാൻ കഴിയും. ഫയലുകൾ അപ്‌ലോഡ് ചെയ്യൽ, ലിസ്റ്റ് ക്രമീകരണങ്ങൾ, ടാസ്ക് മാനേജ്മെന്റ് തുടങ്ങി ഇതിന്റെ പ്രായോഗികത Web Applications-ലും Games-ലും ഉപയോഗിച്ച് കൂടുതൽ വർദ്ധിപ്പിക്കാവുന്നതാണ്.
