ເຫດການ ondrop

DOM 事件 DragEvent

ການອະທິບາຍ ແລະນຳໃຊ້

ເກີດການ ondrop ໃນຖານະທີ່ສິ່ງຕົວຊຽວນິຍົມຫຼືຂັ້ນວັດແທນຖືກປ່ອຍຢູ່ໃນເປົ້າຕົວປະກັນທີ່ມີຜົນງານ

ການຕົວຊຽວນິຍົມແມ່ນປະສົມປະສານຫຼັກໃນ HTML5. ນັ້ນແມ່ນມັນຖືກເອົາແລະຕົວຊຽວນິຍົມໄປໃນສະຖານະທີ່ອື່ນ. ສຳລັບບອກຄວາມຮູ້ຫຼາຍເກີນກວ່າ, ອ່ານພະນັກງານຂອງພວກເຮົາ ການຖອນຖຽງ ຈາກເຈບສະບັບ ຈີເອັສHTML Tutorial.

ຄວາມເຫັນ:ເພື່ອເຮັດໃຫ້ສິ່ງສາມາດຕົວຊຽວນິຍົມ ຄວາມຈິງ HTML5 draggable attribute.

ຄຳແນະນຳ:ໂດຍກົງລະບຽບໃນລະບົບ HTML5

ໃນເວລາທີ່ຕອນທີ່ຈະດຳເນີນການຕົວຊຽວນິຍົມໃນສະຖານະທີ່ຕ່າງກັນຫຼາຍຫຼັງນັ້ນຈະເກີດຂຶ້ນ

ການສະເໜີໃນເປົ້າຕົວສາມາດຕົວຊຽວນິຍົມ:

  • ondragstart - ທີ່ຜູ້ນຳໃຊ້ເລີ່ມຕົວຊຽວນິຍົມ
  • ondrag - ທີ່ສິ່ງຕົວຊຽວນິຍົມຖືກຕົວ
  • ondragend - ທີ່ຜູ້ນຳໃຊ້ສຳເລັດການຕົວຊຽວນິຍົມ

ການສະເໜີໃນເປົ້າຕົວປະກັນ:

  • ondragenter - ທີ່ສິ່ງຕົວຊຽວນິຍົມບັນນິວດີເຂົ້າໃນເປົ້າຕົວປະກັນ
  • ondragover - ທີ່ສິ່ງຕົວຊຽວນິຍົມຢູ່ໃນເປົ້າຕົວປະກັນ
  • ondragleave - ທີ່ສິ່ງຕົວຊຽວນິຍົມຖືກຍ້າຍອອກໃນເປົ້າຕົວປະກັນ
  • ondrop - ທີ່ມີສິ່ງຕົວຊຽວນິຍົມຖືກປ່ອຍຢູ່ໃນເປົ້າຕົວປະກັນ

ຕົວຢ່າງ

ບັນຄັບ JavaScript ບໍ່ໄດ້ພົບໃນ <div> ບັນດາສິ່ງສາມາດຕົວຊຽວນິຍົມ

<div ondrop="myFunction(event)"></div>

ຕອບຢ່າງເອງ

ມີຫຼັກຖານ TIY ຫຼາຍຫຼັງເບື້ອງບານີດ

ວິນິສະພາບ

ໃນ HTML:

<element ondrop="myScript">

ຕອບຢ່າງເອງ

ໃນ JavaScript:

object.ondrop = function(){myScript};

ຕອບຢ່າງເອງ

ໃນ JavaScript，ນຳໃຊ້ກົນລະບຽບ addEventListener()

object.addEventListener("drop", myScript);

ຕອບຢ່າງເອງ

ຄວາມເຫັນ:ບໍ່ສາມາດສະໜັບສະໜູນ Internet Explorer 8 ຫຼືຫຼັງນັ້ນ addEventListener() method.

Technical Details

Bubble Supported
Cancelable Supported
Event type: DragEvent
Supported HTML tags: All HTML elements
DOM Version: Level 3 Events

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

ເລກທີ່ໃນຕາລະບັນບອກກັບບັນດາບັນດາບາດດັບທີ່ສະໜັບສະໜູນການຈຸດມານີ້

Event Chrome IE Firefox Safari Opera
ondrop 4.0 9.0 3.5 6.0 12.0

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

ການສະແດງທຸກການຖອນຂົນປະຕິບັດການຖອນ

<p draggable="true" id="dragtarget">ຖອນຂ້ອຍ!</p>
<div class="droptarget">ປົດຢູ່ບ່ອນນີ້!</div>
<script>
/* ----------------- Event ທີ່ຖືກຈຸດມາໃນເປົ້າຫົວຖອນ ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData() method ກຳນົດບັນດາຂໍ້ມູນຂອງບັນດາຂໍ້ມູນຖອນ
  event.dataTransfer.setData("Text", event.target.id);
  // ເລີ່ມຖອນ p element ຕໍ່ມາອອກຂໍ້ຄວາມ
  document.getElementById("demo").innerHTML = "ເລີ່ມຖອນ p element.";
  // ປ່ຽນຄວາມບໍ່ປະກົດຂອງບັນດາບັນດາສັບທີ່ສາມາດຖອນ
  event.target.style.opacity = "0.4";
});
// ທີ່ຖອນ p element ຕໍ່ມາປ່ຽນສີຂອງຂໍ້ຄວາມອອກສະແດງ
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// ສຳເລັດການຖອນ p element ຕໍ່ມາອອກຂໍ້ຄວາມແລະລະບຸຄວາມບໍ່ປະກົດ
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "ສຳເລັດການຖອນ p element.";
  event.target.style.opacity = "1";
});
/* ----------------- ການຖືກກະຕຸ້ນທີ່ເກີດຂຶ້ນໃນເປົ້າຫຼິ້ນຕິດຕັ້ງ ----------------- */
// ບໍ່ມີການກັນທີ່ທີ່ p ທີ່ສາມາດຖິ້ມໄດ້ເຂົ້າໄປໃນ droptarget, ປ່ຽນຮູບແບບ DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// ຢ່າງເດີມບໍ່ມີການສະຖານທີ່ຖິ້ມ/ບັນດາອັນດັບ/ຂອງສານ. ເພື່ອອະນຸຍາດການສະຖານທີ່ຖິ້ມ, ພວກເຮົາຕ້ອງການປ້ອງກັນການດຳເນີນທີ່ເດີມ
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// ບໍ່ມີການກັນທີ່ທີ່ວ່າ p ທີ່ສາມາດຖິ້ມໄດ້ອອກຈາກ droptarget ຂຽວແລະປ່ຽນຮູບແບບ DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - ການປ້ອງກັນການດຳເນີນທີ່ເວົ້າໄດ້ຂອງສານອິດສະຫຼະ (ປ້ອງກັນການຕິດຕັ້ງທີ່ສະໜາມທີ່ໄດ້ມີລາຍລະອຽດ)
ການທຳນາຍສີສະຫຼາກພາບທີ່ສະແດງທີ່ສະໜາມສານແລະສີກະສັດ DIV
ທົດລອງການເອົາຂໍ້ມູນທີ່ຖືກຖິ້ມ ທີ່ນຳໃຊ້ຄວາມການດຳເນີນ dataTransfer.getData()
ບັນດາຂໍ້ມູນທີ່ຖືກຖິ້ມແມ່ນ id ຂອງບັນດາອັນດັບ ("drag1")
ການຕິດຕັ້ງບັນດາອັນດັບທີ່ຖືກຖິ້ມໄປໃນບັນດາອັນດັບທີ່ສະຖານທີ່ຂຽນ
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

ຕອບຢ່າງເອງ

ບັນດາໜ້າທີ່ຂ້າງນອກ

HTML ການສອນ: HTML5 ຖອນເລື່ອງ

HTML ບົດສະຫຼຸບ: HTML draggable ລະບົບ

DOM 事件 DragEvent