Muungano wa Tabia wa Drag and Drop ya HTML5

Tafuta picha ya CodeW3C.com na angalia katika ukurasa wa eneo la msingi.

Kusha

Kusha (Drag and Drop) ni mafanikio yasiyotarajiwa. Hii inamaanisha inakubali kusha kizingo kwenye eneo lingine.

Kusha ni kiwango cha kawaida wa kusababisha HTML5: kila kizingo kinaweza kuingia kwa kusha.

Matumizi ya kusha

Inafaa kumekua na namba katika tabia inayotukia kusha kwa sababu ya kufaa kufungua na kusha.

API
Kusha 4.0 9.0 3.5 6.0 12.0

Mfano wa kusha wa HTML

Hapa ni mafano ya kusha kwenye HTML kinasababisha mafanikio.

Mfano

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

Jifunze tena

Hili inakua na uharibifu, lakini tufueleza mambo yote ya kusha.

Kuwakilisha kizingo kwa kusha

Kwanza: Kuwakilisha kizingo kwa kufanya kuingia kwa kusha, ingiza sababu ya draggable kwa true:

<img draggable="true">

Muungano wa kusha na kusoma - ondragstart na setData()

Baada ya kuleta, kueleza mambo ambayo yanaofanya kama kizingo kinazopita kinasaidia.

Kwenye matokeo hii, sababu ya ondragstart inaingia kwa kufanya drag(event) kueleza data ambayo inatumika katika kusha.

dataTransfer.setData() methodu inapewa aina ya data na thamani ya data ya kizingo kinazopita:

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

Kwa msingi hii, aina ya data ni "text", na thamani ni id ya kizingo hili ambao kinazopita ("drag1").

Kusaidia kwa nje - ondragover

Tukio la ondragover linaamua kama data ya kusaidia inaweza kusaidia kwa kusaidia.

Kwa msingi, data/element bila kusaidia kusaidia kwa kusaidia kwa kusaidia. Kuwa na kusaidia, tunahitaji kusaidia kwa kusaidia kwa kusaidia kwa kusaidia kwa kusaidia.

Tukio hii inamilikiwa na msingi wa event.preventDefault() ya tukio la ondragover:

event.preventDefault()

Kumaliza kwa kusaidia - ondrop

Kwa kumaliza kusaidia kwa kutoa kifo cha kusaidia, kifo cha kusaidia kinatofautiana.

Kwenye mivumbuzi hii, ondrop inaangazia kikompyuta, drop(event):

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

Ukufupisho wa kwaandiko:

  • Kutumia preventDefault() kusaidia kufikiria uendelevu wa kifungu cha kusaidia kwa uendelevu wa kifungu cha kusaidia (kutoa kifungu kwa muundo wa kichwa cha nje)
  • Kupata data ya kusaidia kwa msingi ya dataTransfer.getData() ya data. Hii inatokana na kutoa data ya aina inayotumiwa katika setData()
  • Data ya kusaidia ni id ya kina ("drag1")
  • Wingiliana kwa upepo wa kumaliza kwa kumaliza

Mafanikio mengi

Kupataa picha

Jibu: Kupataa picha kati ya upepo wa <div> mbili:

Tafuta picha ya CodeW3C.com na angalia katika ukurasa wa eneo la msingi.

Jifunze tena