HTML5 拖放

CodeW3C.com အမှတ်အသား ကို ပုံစံအထိပ်ပိုင်း သို့ ဖိနှိပ်ပါ။

拖放

拖放（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" နှင့် ပါဝင်သည် ဖြစ်ပါသည် လွှတ်တင်တိရိက် အဖွဲ့ ("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 အမှတ်အသား ကို ပုံစံအထိပ်ပိုင်း သို့ ဖိနှိပ်ပါ။

ကိုယ်တိုင် ကျင့်လေ့ကြံ