ড্র্যাগ অ্যান্ড ড্রপ (DnD) একটি শক্তিশালী ইউজার ইন্টারফেস ধারণা যা মাউস ক্লিকের সাহায্যে আইটেমগুলিকে অনুলিপি করা, পুনরায় সাজানো এবং মুছে ফেলা সহজ করে তোলে। এটি ব্যবহারকারীকে একটি উপাদানের উপর মাউস বোতামটি ক্লিক করতে এবং ধরে রাখার অনুমতি দেয়, এটিকে অন্য স্থানে টেনে আনতে এবং সেখানে উপাদানটি ফেলে দেওয়ার জন্য মাউস বোতাম ছেড়ে দেয়৷
প্রথাগত HTML4 এর সাথে ড্র্যাগ এবং ড্রপ কার্যকারিতা অর্জন করতে, বিকাশকারীদের হয় জটিল জাভাস্ক্রিপ্ট প্রোগ্রামিং বা অন্যান্য জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যেমন jQuery ইত্যাদি ব্যবহার করতে হবে৷
এখন HTML 5 একটি ড্র্যাগ অ্যান্ড ড্রপ (DnD) API নিয়ে এসেছে যা ব্রাউজারে নেটিভ DnD সমর্থন নিয়ে আসে যা কোড আপ করা আরও সহজ করে তোলে৷
কীভাবে টেনে আনতে হবে এবং ড্রপ করতে হবে
ড্র্যাগ অ্যান্ড ড্রপ বাস্তবায়ন করতে, আপনাকে একটি দ্বি-পদক্ষেপ প্রক্রিয়া অনুসরণ করতে হবে৷
৷ধাপ 1 − একটি বস্তুকে টেনে আনা যায়
HTML5 এ ড্র্যাগ অ্যান্ড ড্রপ প্রয়োগ করতে, প্রথমে, আপনাকে অবজেক্টটিকে টেনে আনার যোগ্য করতে হবে,
আপনি যদি একটি উপাদান টেনে আনতে চান, তাহলে আপনাকে সেই উপাদানটির জন্য ড্র্যাগযোগ্য বৈশিষ্ট্যটিকে সত্যে সেট করতে হবে৷ ড্র্যাগস্টার্টের জন্য একটি ইভেন্ট লিসেনার সেট করুন যা টেনে আনা ডেটা সংরক্ষণ করে। ইভেন্ট লিসেনার ড্র্যাগস্টার্ট অনুমোদিত প্রভাবগুলি সেট করবে (কপি, সরানো, লিঙ্ক বা কিছু সংমিশ্রণ)।
উদাহরণ
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #50B948; width:75px; height:75px; }
#boxB { background-color: #0000FF; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop in HTML5</h2>
<div>Try to drag the green box around.</div>
<div id="boxA" draggable="true"
ondragstart="return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id="boxB">Dustbin</div>
</center>
</body>
</html> ধাপ 2 - অবজেক্ট ড্রপিং
ড্রপ গ্রহণ করতে, ড্রপ টার্গেটকে কমপক্ষে তিনটি ইভেন্ট শুনতে হবে।
ড্রপ টার্গেট ড্রপ গ্রহণ করবে কিনা তা নির্ধারণ করতে ড্রাজেন্টার ইভেন্ট ব্যবহার করা হয়। যদি ড্রপ গ্রহণ করতে হয়, তাহলে এই অনুষ্ঠানটি বাতিল করতে হবে। ড্র্যাগোভার ইভেন্ট, যা ব্যবহারকারীকে কী প্রতিক্রিয়া দেখানো হবে তা নির্ধারণ করতে ব্যবহৃত হয়।
এখানে আপনি কীভাবে একবার অন্যের কাছে আপত্তি জানাতে পারেন
উদাহরণ
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #50B948; width:75px; height:75px; }
#boxB { background-color: #0000FF; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop in HTML5</h2>
<div>Try to move the green box into the blue box.</div>
<div id="boxA" draggable="true"
ondragstart="return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(ev)"
ondrop="return dragDrop(ev)"
ondragover="return dragOver(ev)">Dustbin
</div>
</center>
</body>
</html> 