HTML5 Drag and Drop

Raba CodeW3C.com Hoto zuwa kudancin kudancin.

Dacewa

Dacewa (Drag and Drop) ce yankin da yake cikin gida. Ita ke nufin ce kaiwa da kaiwa abin dake da kaiwa abin dake zuwa wuri na gaba.

Dacewa ce yankin na sabon tushin HTML5: kashi dandi guda ce ake dacewa.

Dacewa na browsers

Numbers da cikin tabbin ce gudan kashi na browsers da ake dacewa dacewa.

API
Dacewa 4.0 9.0 3.5 6.0 12.0

Tushin HTML drag and drop

Wannan ce cikin tushin da yana bincike dacewa da drag and drop:

Tushin

<!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>

Ganin da kai tsaye

Ita zai ya kan kashi, amma dake kaiwa, kaiwa kashi datti dacewa da drag and drop.

Rarraba abin ceceka a dacewa

Koyau: domin rarrabawa abin ceceka a dacewa, kama shi a rarraba attibuti draggable a true:

<img draggable="true">

Dacewa da drag and drop - ondragstart da setData()

Koyau, ce gudan kashi ce faruwa idan abin ceceka yake.

A cikin tushin da suka, ondragstart attibuti ce soke shigar da function drag(event), ce gudan kashi a dacewa.

dataTransfer.setData() method ce gudan kashi datti launin da wuri ceceka:

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

A cikin wannan tushin, launin datti "text", amma kashi wuri ita ceceka id ("drag1").

Kan hau - ondragover

Event ondragover na tsara data da ke daga baya za a iya kama zuwa.

A tsawon lokaci, data/element na iya kama zuwa abin da ke kudanci. domin kai tsaye, a kai kame aiki na wannan element na kai tsaye.

Gudanar da aiki na wannan taski daga method event.preventDefault() na event ondragover:

event.preventDefault()

Aiki na kama - ondrop

Kai tsaye na yin aiki yana kai tsaye drop event.

A cikin shaidar na kai tsaye, ondop property tana kai siffa kan function, drop(event):

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

Tsunan koda:

  • Call preventDefault() domin kame da aiki na browser default (aiki na drop event yana kai tsaye a matsayin link)
  • Ganin data da ke daga baya ta kan method dataTransfer.getData("text"). Method na wannan ake kammala yana samar da kai tsaye kowane data da ake samar da a kan setData() method.
  • Data da ke daga baya shi id na abin da ke daga baya ("drag1")
  • Duba abin da ke daga baya zuwa abin da ke kudanci.

Kudade masu iya ganin

Kanniyar hoto

Kanniyar hoto daga abin da ke daga <div> zuwa <div> da ke daga baya:

Raba CodeW3C.com Hoto zuwa kudancin kudancin.

Ganin da kai tsaye