HTML Drag and Drop API
HTML တွင် မည်သည့်ဒြပ်စင်မဆို ဆွဲငင်ချနိုင်သည်။
ဥပမာ
W3Schools ပုံကို ထောင့်မှန်စတုဂံသို့ ဆွဲယူပါ။
ဆွဲချလိုက်ပါ။
Drag and drop သည် အလွန်အသုံးများသော feature တစ်ခုဖြစ်သည်။ အရာဝတ္ထုတစ်ခုကို ဖမ်းယူပြီး အခြားတစ်နေရာသို့ ဆွဲယူသည့်အခါဖြစ်သည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် Drag and Drop ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop နမူနာ
အောက်ဖော်ပြပါ ဥပမာသည် ရိုးရှင်းသော drag and drop ဥပမာတစ်ခုဖြစ်သည်။
ဥပမာ
<!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>
၎င်းသည် ရှုပ်ထွေးသည်ဟု ထင်ရသော်လည်း အဖြစ်အပျက်တစ်ခု၏ မတူညီသော အစိတ်အပိုင်းများအားလုံးကို ဆွဲယူ၍ချလိုက်ပါ။
ဆွဲယူနိုင်သော Element တစ်ခုပြုလုပ်ပါ။
ပထမဦးစွာ- ဒြပ်စင်တစ်ခုကို ဆွဲယူနိုင်စေရန်၊ draggableရည်ညွှန်းချက်ကို အမှန်ဟု သတ်မှတ်ပါ-
<img draggable="true">
ဆွဲယူရမည့်အရာ - ondragstart နှင့် setData()
ထို့နောက်၊ ဒြပ်စင်ကို ဆွဲငင်လိုက်သောအခါ ဘာဖြစ်သင့်သည်ကို သတ်မှတ်ပါ။
အထက်ဖော်ပြပါ ဥပမာတွင်၊ ondragstartattribute သည် မည်သည့်ဒေတာကို ဆွဲယူရမည်ကို သတ်မှတ်ပေးသည့် လုပ်ဆောင်ချက်၊ drag(ဖြစ်ရပ်) ဟုခေါ်သည်။
နည်းလမ်း သည် dataTransfer.setData()ဒေတာအမျိုးအစားနှင့် ဆွဲယူထားသောဒေတာတန်ဖိုးကို သတ်မှတ်သည်-
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
ဤကိစ္စတွင်၊ ဒေတာအမျိုးအစားသည် "စာသား" ဖြစ်ပြီး တန်ဖိုးသည် ဆွဲယူနိုင်သောဒြပ်စင် ("drag1") ၏ ID ဖြစ်သည်။
ဘယ်မှာချရမလဲ - ondragover
အဖြစ်အပျက် သည် ondragoverဆွဲယူထားသောဒေတာကို ဖြုတ်ချနိုင်သည့်နေရာကို သတ်မှတ်ပေးသည်။
မူရင်းအားဖြင့်၊ ဒေတာ/ဒြပ်စင်များကို အခြားဒြပ်စင်များတွင် ချန်ထားခဲ့၍မရပါ။ တစ်စက်ကို ခွင့်ပြုရန်၊ ကျွန်ုပ်တို့သည် ဒြပ်စင်၏ ပုံသေကိုင်တွယ်ခြင်းကို တားဆီးရပါမည်။
event.preventDefault()ondragover ဖြစ်ရပ်အတွက် နည်းလမ်းကို ခေါ်ဆိုခြင်းဖြင့် ၎င်းကို လုပ်ဆောင်သည် ။
event.preventDefault()
Drop - ondrop လုပ်ပါ။
ဆွဲယူထားသောဒေတာကို ပြုတ်ကျသောအခါ၊ ကျဆင်းမှုဖြစ်စဉ်တစ်ခု ဖြစ်ပေါ်သည်။
အထက်ဖော်ပြပါ ဥပမာတွင်၊ ondrop attribute သည် function တစ်ခု၊ drop(event) ကို ခေါ်သည်။
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
ကုဒ်ကို ရှင်းပြထားသည်-
- ဒေတာများ၏ ဘရောင်ဇာ၏ ပုံသေကိုင်တွယ်ခြင်းကို တားဆီးရန် PreventDefault() ကိုခေါ်ဆိုပါ (ပုံမှန်သည် drop on link အဖြစ်ဖွင့်ထားသည်)
- dataTransfer.getData() နည်းလမ်းဖြင့် ဆွဲဆွဲထားသောဒေတာကို ရယူပါ။ ဤနည်းလမ်းသည် setData() နည်းလမ်းတွင် တူညီသောအမျိုးအစားအဖြစ် သတ်မှတ်ထားသည့် မည်သည့်ဒေတာကိုမဆို ပြန်ပေးပါမည်။
- ဆွဲယူထားသောဒေတာသည် ဆွဲယူထားသောဒြပ်စင်၏ ID ဖြစ်သည် ("drag1")
- ဆွဲထားသောဒြပ်စင်ကို drop element ထဲသို့ထည့်ပါ။
နောက်ထပ် ဥပမာများ
ဥပမာ
<div> ဒြပ်စင်နှစ်ခုကြားတွင် ပုံတစ်ပုံကို ဆွဲချနည်း၊