ເຫດການ ondragstart

ການລະບົບ DOM ເຫດການ DragEvent

ການສະເໜີ ແລະການນຳໃຊ້

ມີເຫດການ ondragstart ເກີດຂື້ນ ເມື່ອຜູ້ນຳໃຊ້ເລີ່ມຕົວກັນປະຕູ ຫຼືຄຳວິດຕາມ

ການຖືກຍົກຍ້າຍ ແມ່ນພາກສ່ວນທີ່ຍັງມີຢູ່ໃນ HTML5. ມັນແມ່ນວ່າເມື່ອເຈົ້າ "ກິດຈະການ" ໜຶ່ງວັດຖຸ ແລະຖືກຍົກຍ້າຍໄປຫາທີ່ຕ່າງກັນ. ເພື່ອຮຽນຮູ້ຫຼາຍກວ່ານີ້，ຂໍ້ສະເໜີຂອງພວກເຮົາ ກ່ຽວກັບ ການຖອນຖາວອນ HTML5ຖືກຍົກຍ້າຍ

ລາຍງານ:ເພື່ອເຮັດໃຫ້ປະກອບສ່ວນສາມາດຕົວກັນໄດ້，ຂໍ້ສະເໜີຂອງ HTML ປະເພດ draggable HTML5.

ຄຳແນະນຳ:ໂດຍປົກກະຕິຢ່າງໃດກໍ່ຕາມພາຍໃນການເຊື່ອມຕໍ່ຕາມ ແລະພາບຖານ ສາມາດຕົວກັນໄດ້ ແລະບໍ່ຕ້ອງມີປະເພດ draggable

ໃນຂັ້ນຕອນທີ່ຕ່າງກັນຂອງການຖືກຍົກຍ້າຍ ມີຫຼາຍເຫດການປະຕິບັດ ແລະອາດເກິດຂື້ນ:

ມີເຫດການປະຕິບັດໃນປະຕູພະຍາຍາມ (ເປັນປະຕູແທນ):

  • ondragstart - ມີເຫດການຜູ້ນຳໃຊ້ເລີ່ມຕົວກັນປະຕູ
  • ondrag - ມີເຫດການຢູ່ຖືກຕົວກັນ
  • ondragend - ມີເຫດການຜູ້ນຳໃຊ້ສຳເລັດຕົວກັນປະຕູ

ມີເຫດການປະຕິບັດໃນປະຕູພະຍາຍາມ:

  • ondragenter - ມີເຫດການເຂົ້າຫາປະຕູພະຍາຍາມ
  • ondragover - ມີເຫດການຢູ່ປະຕູພະຍາຍາມ
  • ondragleave - ມີເຫດການອອກຈາກປະຕູພະຍາຍາມ
  • ondrop - ມີເຫດການຄືນປະຕູທີ່ຖືກປ່ອຍຢູ່ປະຕູພະຍາຍາມ

ຄວາມຈິງ

ນຳໃຊ້ JavaScript ເມື່ອຜູ້ນຳໃຊ້ເລີ່ມຕົວກັນ <p> ປະກາດ:

<p draggable="true" ondragstart="myFunction(event)">ຕົວຂ້ອຍຈະຕົວກັນ!</p>

ທ້າທາຍຕົວເອງ

ມີຫຼາຍຄວາມຈິງຫຼາຍການນຳໃຊ້ TIY ໃນຕ່າງບັນຫາ

ສັບສຳນັກງານ

ໃນ HTML:

<element ondragstart="myScript">

ທ້າທາຍຕົວເອງ

ໃນ JavaScript:

object.ondragstart = function(){myScript};

ທ້າທາຍຕົວເອງ

ໃນ JavaScript，ນຳໃຊ້ພວກມາດຕະການ addEventListener()

object.addEventListener("dragstart", 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

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

ຈຳນວນທີ່ກ່ຽວກັບການສະໜັບສະໜູນຂອງ event ຄັ້ງທໍາອິດຂອງ browser

Event Chrome IE Firefox Safari Opera
ondragstart 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.";
  // ປ່ຽນຄວາມຜ່ອນຂອງບັນດາ 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";
});
/* ----------------- Event ທີ່ຖືກຈຸດຢູ່ໃນຈຸດຈອດ ----------------- */
// ບໍ່ມີການດຳເນີນການກະເບຣັງກະເບຣັງ DIV ຄືບໍ່ມີການຖືກຖານາຂຶ້ນຂອງ p element
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// ການດຳເນີນຂັ້ນຕົ້ນຂອງຄອບບີ້ສະໄພ (ການຈັດການທີ່ເວົ້າໄດ້ເປັນການຈອດຂອງ data/element ຕໍ່ຕໍ່ຫນັງ)
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// ບໍ່ມີການດຳເນີນການກະເບຣັງກະເບຣັງ DIV ຄືບໍ່ມີການຖືກຖານາຂຶ້ນຂອງ p element
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - ປ້ອງກັນການດຳເນີນຂັ້ນຕົ້ນຂອງຄອບບີ້ສະໄພ (ການຈັດການທີ່ເວົ້າໄດ້ເປັນການເຊື່ອມຕໍ່)
ການລົງມາຂອງສີຂອງຂີ້ຄວາມອອກສຽງແລະສີກະເບຣັງຂອງ DIV
ການຊອກຫາຂໍ້ມູນທີ່ຖືກຖານາຂຶ້ນທີ່ຖືກຖານາຂຶ້ນໂດຍ dataTransfer.getData() method
ຂໍ້ມູນທີ່ຖືກຖານາຂຶ້ນແມ່ນ 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 drag and drop

HTML ອະນຸມັດ: HTML draggable attribute

ການລະບົບ DOM ເຫດການ DragEvent