การขยายตัว HTML5

কোডওয়েথ্রিককম চিত্রটিকে চতুর্ভুজে টেনে নিন。

拖放

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

浏览器支持

表格中的数字指示了完全支持拖放的首个浏览器版本。

API
拖放 4.0 9.0 3.5 6.0 12.0

HTML 拖放实例

下列是关于拖放的简单例子：

实例

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

它也许看上去有点复杂，不过让我们研究一下拖放事件的所有不同部分。

把元素设置为可拖放

首先：为了把一个元素设置为可拖放，请把 draggable 属性设置为 true：

拖放的内容 - ondragstart 和 setData()

然后，规定当元素被拖动时发生的事情。

在上面的例子中，ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值：

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

এই উদাহরণে, ডাটা টাইপ "text" এবং মান হল এই ড্রগকর্মী ইউনিটের id ("drag1")

ড্রগ কোথায় - ondragover

ondragover ইভেন্ট নির্দেশ করে যেখানে ড্রগ ডেটা পড়া যাবে

ডিফল্টভাবে, ডেটা/ইলেমেন্টটি অন্য ইলেমেন্টে পড়া যায় না।ড্রগ ড্রপ প্রক্রিয়াকে প্রয়োগ করতে, আমরা ইলেমেন্টটির এই ডিফল্ট প্রক্রিয়াকরণকে প্রতিহত করতে হবে

এই কাজটি ondragover ইভেন্টের event.preventDefault() মথোদ্দতা দ্বারা করা হয়

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() ডাক করে ডেটার ব্রাউজার ডিফল্ট প্রক্রিয়াকরণকে প্রতিহত করুন (drop ইভেন্টের ডিফল্ট ব্যবহার হল লিঙ্ক হিসাবে খুলা)
  • dataTransfer.getData() মথোদ্দতা দ্বারা ড্রগ ডেটা পাওয়া যায়।এই মথোদ্দতা সেটডাটা() মথোদ্দতা দ্বারা সেট করা যেকোন ডেটা টাইপকেও রিটার্ন করবে
  • ড্রগ ডেটা ড্রগ ইলেমেন্টের id ("drag1")
  • ড্রগ ইলেমেন্টটিকে ড্রপ ইলেমেন্টে অন্তর্ভুক্ত করুন

আরও উদাহরণ

চিত্রটিকে উঠে নাওয়া

দুটি <div> ইলেমেন্টের মধ্যে চিত্রটিকে উঠে নাওয়ার কিভাব:

কোডওয়েথ্রিককম চিত্রটিকে চতুর্ভুজে টেনে নিন。

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন