এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল(৫) ড্রাগ এবং ড্রপ- HTML5 Drag & Drop


ড্রাগ এবং ড্রপ মানে হচ্ছে একটি অবজেক্টকে এক স্থান থেকে টেনে অন্য স্থানে নিয়ে যাওয়া। এইচটিএমএল(৫) এর স্ট্যান্ডার্ড অনুযায়ী সকল এলিমেন্টকে ড্রাগ এবং ড্রপ করা যাবে।


ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৪.০, ইন্টারনেট এক্সপ্লোরার ৯.০, ফায়ারফক্স ৩.৫, সাফারি ৬.০ এবং অপেরা ১২.০ ভার্সন থেকে ড্রাগ এবং ড্রপ সাপোর্ট করে।


এইচটিএমএল ড্র্যাগ এবং ড্রপ উদাহরণ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল ড্র্যাগ এবং ড্রপ </title>
   <style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p> এর ইমেজটি আয়তক্ষেত্রের মধ্যে টানুনঃ</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="../images/satt.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">


</body>
</html>

ফলাফল




উদাহরণের বর্ণনা

সর্বপ্রথম একটি এলিমেন্টকে ড্রাগ করার ক্ষমতা দেওয়ার জন্য ঐ এলিমেন্টে draggable এট্রিবিউটের ভ্যালু true সেট করতে হবেঃ

<img draggable="true">


ondragstart এবং setData()

উপরের উদাহরণে, ondragstart এট্রিবিউট drag(event) নামে একটি ফাংশনকে কল করে ডেটা ড্রাগ করার ক্ষমতা নির্ধারণ করে।

dataTransfer.setData() মেথড ডেটার টাইপ এবং ভ্যালু সেট করেঃ

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

এই ক্ষেত্রে, ডেটা টাইপ "text" সেট করা হয়েছে এবং ড্রাগ করার যোগ্য এলিমেন্টের আইডিকে("drag1") আমরা টার্গেট হিসেবে সেট করেছি।


ondragover ইভেন্ট

ডিফল্টভাবে, কোন এলিমেন্ট/ডেটাকে অন্য এলিমেন্টের উপর রাখা যায় না। একটি এলিমেন্টকে কোন এলিমেন্টের উপর রাখতে হলে প্রথমে তার ডিফল্ট হ্যান্ডলিংকে রোধ করতে হবে।

আমরা event.preventDefault() মেথড ব্যবহার করে এটি করতে পারি। এই মেথডকে আমরা ondragover ইভেন্টে কল করতে পারি, ondragover ইভেন্টটি ডেটাকে ড্রপ করার স্থান নির্দেশ করে।

event.preventDefault()


ondrop ইভেন্ট

ড্রাগ করা ডেটাকে আমরা যখন একটি এলিমেন্টের উপর রাখি তখন একটি ইভেন্ট ঘটে, এর নাম drop ইভেন্ট। এই ইভেন্ট ঘটলে ondrop এট্রিবিউট drop(event) নামের একটি ফাংশনকে কল করেঃ

function drop(ev){
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
}

এখানে preventDefault() মেথডের মাধ্যমে ব্রাউজারের ডিফল্ট হ্যান্ডলিংকে রোধ করা হয়েছে। ব্রাউজারে কোন ডেটাকে ড্রপ করা হলে ডিফল্টভাবে এটি লিংক হিসেবে নতুন উইন্ডোতে ওপেন হয়। dataTransfer.getData() মেথডের মাধ্যমে ড্রাগ করা ডেটাকে পাওয়া যায়। এই মেথড setData() মেথডে সেট করা একই টাইপের ডেটাকে পাবে। সবশেষে ড্রাগকৃত এলিমেন্টকে ড্রপ এলিমেন্টে যোগ করা হয়।


দুইটি DIV এলিমেন্টের মধ্যে ড্রাগ এবং ড্রপ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
#div1, #div2
{float:left; width:100px; height:100px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="../../images/satt_a.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="95" height="95">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

ফলাফল