HTML5 ဝင်တင်

CodeW3C.com ပုံ ကို အပေါ်လွှတ် ပုံတစ်ခု အရွယ်တွင် ခိုးဆွဲပါ။

ခုံးရိုက်

ခုံးရိုက် (Drag နှင့် Drop) သည် အသုံးချ နိုင် အရာ ဖြစ်သည်။ ဒါမှာ မိမိ အစား အမျိုးမျိုး ကို ဖြစ်စေ ပြီး အခြား တည်နေရာ သို့ ခုံးရိုက် ပို့ဆောင်ရန် ဖြစ်သည်。

ခုံးရိုက် သည် HTML5 အခြေခံ အရေးအချိန် အပေါ် ပါဝင်သည်: ဘရာဇက်ဗြူး အချက်အလက် အစားကြောင်း တိုင်း အား ခုံးရိုက် ခွင့်ပြုပါသည်。

ဘရာဇက်ဗြူး အကူအညီ

အခြေခံ အချက်အလက် အရင်းအမြစ် အမှတ်များ သည် ခုံးရိုက် အကျိုးဆက် အပြင်းအထန် ထင်ရှား သော ဘရာဇက်ဗြူး ပုံစံ ကို ကူညီပါသည်。

API
ခုံးရိုက် 4.0 9.0 3.5 6.0 12.0

HTML ခုံးရိုက် အကျိုးဆက်

အခြေခံ အကျိုးဆက် တစ်ခု ဖြစ်ပါသည်:

အကျိုးဆက်

<!DOCTYPE HTML>
<html>
<head>
<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)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

ကိုယ်တိုင် ကျင်းပနိုင်

အရှိန်သာ လို့ ရှိနိုင် သော်လည်း ကျွန်ုပ် ခုံးရိုက် အခြေအား အရောက် တစ်ခုလုံး ကို လေ့လာပါလိုက်သည်。

အခြေခံ အချက်အလက် ကို ခုံးရိုက် ချိန်တွင် ဖြစ်စေ

ပထမသုံး မှာ: အခြေခံ အချက်အလက် ကို ခုံးရိုက် ချိန်တွင် ဖြစ်စေ ကို ခုံးရိုက်လိုက်ရမည်ဟု ဖြစ်ပါသည်: draggable အခြေအား ကို true အစား ပြင်ဆင်ပါသည်:

<img draggable="true">

ခုံးရိုက် အခြေအား နှင့် setData()

နောက်မှ အခြေခံ အချက်အလက် ကို ခုံးရိုက် ဖြစ်ပေါ်လာမည့် အခြေအား ကြောင်းအရာ ကို အုပ်ချုပ်ပါသည်。

အထိပ်တန်း အကြောင်းအရာတွင် ondragstart အခြေအား ကြောင်းအရာသည် drag(event) အပေါ် ခေါ်ဆိုခဲ့ ပြီး ခုံးရိုက် အချက်အလက် ကို အုပ်ချုပ်ပါသည်。

dataTransfer.setData() ဓာတ်ပြား စနစ် က ခုံးရိုက် အချက်အလက် အမျိုးအစား နှင့် ပြောင်းလဲစွာ ခုံးရိုက် ပြင်ဆင်ပါသည်：

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

ဒါမှာ အခြေခံ အချက်အလက် အမျိုးအစား သည် "text" ဖြစ် ပြီး ပြောင်းလဲစွာ ခုံးရိုက် အက်ဒ် ဖြစ်သည် ("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() ဓာတ်း မှ ဖယ်ရှား အချက်အလက် ကို ရရှိပါ။ ဒါ့မှ ပြန်လည် ပြန်ဆိုရာ၌ setData() ဓာတ်း တွင် အတိုင်းအတာ တူညီ သော အချက်အလက် ကို ပြန်လည် ပြန်ဆိုပါ။
  • ဖယ်ရှား အချက်အလက် သည် ဖယ်ရှား ပုံ အကြောင်းအရာ ဖြစ်သည် ("drag1")
  • ဖယ်ရှား ပုံ ကို ထိန်းချုပ် ပုံ အရွယ်တွင် ထပ်ထည့်ပါ

အခြား အမှတ်အသား

ပုံ ဖယ်ရှား

နှစ်ခုကြားသို့ ပုံ ကို ဖယ်ရှား ပြီး ကိုယ်တိုင် ခိုးဆွဲ လို့ ဘာတူရှိသလဲအိုင်။

CodeW3C.com ပုံ ကို အပေါ်လွှတ် ပုံတစ်ခု အရွယ်တွင် ခိုးဆွဲပါ။

ကိုယ်တိုင် ကျင်းပနိုင်