HTML5 拖放

ຕິດຕັ້ງບັນດາພາບຂອງ CodeW3C.com ສຳລັບຕົວຊາຍຕາມ.

ຖອຍຂື້ນ

ຖອຍຂື້ນ (Drag and Drop) ແມ່ນລະຫວ່າງທີ່ພົນທະນາການ. ມັນອາດກ່າວວ່າ ທ່ານຈະຍິງຂອງສິ່ງໜຶ່ງ ແລະ ຖອຍຂື້ນເຂົ້າໃນທີ່ອື່ນ.

ຖອຍຂື້ນຕາມສາຍພະນັກງານແມ່ນສ່ວນໜຶ່ງຂອງສາຍພະນັກງານ HTML5: ບັນດາປະກອບທັງໝົດສາມາດຖອຍຂື້ນ.

ການສະນັບສະໜູນບັນດາບັນດາບັນນາທິການ

ຈຳນວນທີ່ຢູ່ໃນຕາລາງສະແດງວ່າການສະນັບສະໜູນຖອຍຂື້ນຢ່າງເຕັມພາບຂອງບັນດາສາຍພະນັກງານ.

API
ຖອຍຂື້ນ 4.0 9.0 3.5 6.0 12.0

ຄວາມສະແດງ HTML5 ຖອຍຂື້ນ

ນີ້ແມ່ນຄວາມສະແດງຂອງຖອຍຂື້ນທີ່ງົນທະສາດລະບົບ HTML5:

ຄວາມສະແດງ

<!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 ໄດ້ເອິ້ນຕົວອອກຂອງ drag(event) ເພື່ອນຳມະນາການຖອຍຂື້ນຂອງວັດຖຸ.

dataTransfer.setData() ກົດລະບຽບວັດຖຸຂໍ້ມູນທີ່ຖອຍຂື້ນ ແລະ ຄູ່ມູນຂອງວັດຖຸທີ່ຖອຍຂື້ນ:

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

ໃນບັນທັດນີ້ ວັດຖຸຂໍ້ມູນແມ່ນ "text" ແລະ ຄູ່ມູນແມ່ນ id ຂອງບັນດາບັນດາປະກອບທີ່ສາມາດຖອຍຂື້ນ (\

拖到何处 - ondragover

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

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

ວຽກການນີ້ແມ່ນເຮັດໂດຍວິທີ event.preventDefault() ຂອງການມາດຕະການ ondragover:

event.preventDefault()

ການຕິດຕັ້ງ - ondrop

ຄວາມມູນທີ່ຖືກທ້າທາຍທີ່ຖືກປ່ອຍອອກຈະເກີດການ ondrop.

ໃນຕົວຢ່າງທີ່ກ່າວຂື້ນຢູ່ນີ້, ການເອິ້ນ ondrop ກຳນົດການເອິ້ນວິທີຂອງພວກເຂົາ, drop(event):

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

ການອະທິບາຍວິທີ:

  • ການເອິ້ນ preventDefault() ເພື່ອປ້ອງກັນການກວດກາຄວາມມູນທີ່ຖືກຕ້ອງຈາກບັນຊີບູໄບ (ການກວດກາຄວາມມູນທີ່ມີການກວດກາແບບລູກແມ່ນການເປີດເວັບໄຊໃຫ້ເປັນການເຊື່ອມ)
  • ການຮັບຂໍ້ມູນທີ່ຖືກທ້າທາຍ ວິທີ dataTransfer.getData() ຈະກັບຄືນຂໍ້ມູນທີ່ຖືກກວດກາໃນ setData() ມີຊະນິດດຽວກັນ
  • ຂໍ້ມູນທີ່ຖືກທ້າທາຍແມ່ນ id ("drag1") ຂອງສິ່ງທີ່ຖືກທ້າທາຍ
  • ກວດຫາສິ່ງທີ່ຖືກທ້າທາຍແລະຕິດຕັ້ງສິ່ງທີ່ຖືກຕິດຕັ້ງ

ຫລາຍກໍານົດຫລາຍອັນ

ທ້າທາຍພາບ

ບວກວ່າ: ວິທີການທ້າທາຍພາບລະຫວ່າງປະກອບສະໂລຫະ <div> ສອງຢ່າງ:

ຕິດຕັ້ງບັນດາພາບຂອງ CodeW3C.com ສຳລັບຕົວຊາຍຕາມ.

ທ້າທາຍຕະຫລອດ