HTML5 拖放

ຕິດຕັ້ງບັນຊີ CodeW3C.com ສຳລັບການຕິດຕັ້ງໃນສະໄມມຂອງພວກເຈົ້າ.

ຖອຍຕົວ

ຖອຍຕົວ (Drag and 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">

ຂັ້ນຕອນຖອຍຕົວ - ondragstart ແລະ setData()

ຫຼັງຈາກນັ້ນ ກຳນົດສິ່ງທີ່ຈະເກີດຂຶ້ນເມື່ອບັນດາປະກອບຖອຍຕົວ:

ໃນກໍລະນີກ່າວກ່ອນນີ້ ondragstart ຂອງລັກສະນະກຳນົດການຖອຍຕົວທີ່ຖອຍຕົວຂອງຂໍ້ມູນ:

ກົນລະບົບ setData() ຂອງ dataTransfer ກຳນົດປະເພດຂອງຂໍ້ມູນທີ່ຖອຍຕົວ ແລະວັດຈຸຂອງຂໍ້ມູນ:

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

ໃນກໍລະນີນີ້ ປະເພດຂອງຂໍ້ມູນແມ່ນ "text" ແລະວ່າຂໍ້ມູນນີ້ແມ່ນ id ຂອງບັນດາບັນດາປະກອບທີ່ສາມາດຖອຍຕົວມາ ("drag1")。

拖到何处 - ondragover

ondragover 事件规定被拖动的数据能够被放置到何处。

默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。

ວຽກນີ້ໄດ້ດໍາເນີນໂດຍວິທີ event.preventDefault() ຂອງເຫດການ ondragover:

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()
  • ຂໍ້ມູນທີ່ຖືກທ້າທາຍແມ່ນ id ("drag1") ຂອງບັນຊີທີ່ຖືກທ້າທາຍ
  • ສະເໜີບັນຊີທີ່ຖືກທ້າທາຍເຂົ້າໃນບັນຊີທີ່ຕິດຕັ້ງ

ຫຼາຍການຕົວຢ່າງອື່ນ

ທ້າທາຍພາບ

ວິທີທີ່ຈະທ້າທາຍພາບຈາກສອງ <div> ອອກມາບໍ່:

ຕິດຕັ້ງບັນຊີ CodeW3C.com ສຳລັບການຕິດຕັ້ງໃນສະໄມມຂອງພວກເຈົ້າ.

ທ້າທາຍພວກເຈົ້າເອງ