ເຫດການ ondragleave
Definition and usage
The ondragleave event occurs when a draggable element or text selection leaves the valid target area.
ondragenter and ondragleave events can help users understand that a draggable element is about to enter or leave the target area. For example, you can set the background color when the draggable element enters the target area and remove the color when the element leaves the target.
Drag and drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location. For more information, please read our ການດູດທະນາຄານ HTML5HTML tutorial.
ຄວາມເຫັນ:ເພື່ອເຮັດໃຫ້ປະກອບສິ່ງສາມາດຕິດຕັ້ງໄດ້ກະຈາຍຄວາມຈະເລີນ global HTML5 draggable attribute。
ຄຳແນະນຳ:ໂດຍປົກກະຕິການສະໜັບສະໜູນຂອງພາສາການຄົ້ນຫາກັບການຕິດຕັ້ງກັບການຕິດຕັ້ງບໍ່ຕ້ອງມີຄວາມຈະເລີນ draggable
ໃນຂັ້ນຕອນທີ່ຕ່າງກັນຂອງການຕິດຕັ້ງຂັງສົ່ງມາຫຼາຍຫຼາຍການສະເຫນີອາດເກີດຂຶ້ນ
ການສະເຫນີໃນບ່ອນຕິດຕັ້ງທີ່ສາມາດຕິດຕັ້ງ:
- ondragstart - ເມື່ອຜູ້ນຳໃຊ້ເລີ່ມຕິດຕັ້ງປະກອບສິ່ງ
- ondrag - ເມື່ອປະກອບສິ່ງຕິດຕັ້ງ
- ondragend - ເມື່ອຜູ້ນຳໃຊ້ສຳເລັດການຕິດຕັ້ງປະກອບສິ່ງ
ການສະເຫນີໃນບ່ອນຕິດຕັ້ງ:
- ondragenter - ເມື່ອປະກອບສິ່ງທີ່ຕິດຕັ້ງຢູ່ບ່ອນຕິດຕັ້ງ
- ondragover - ເມື່ອປະກອບສິ່ງທີ່ຕິດຕັ້ງຢູ່ບ່ອນຕິດຕັ້ງ
- ondragleave - ເມື່ອປະກອບສິ່ງທີ່ຕິດຕັ້ງອອກຈາກບ່ອນຕິດຕັ້ງ
- ondrop - ເມື່ອປະກອບສິ່ງທີ່ຕິດຕັ້ງຢູ່ບ່ອນຕິດຕັ້ງ
ຄວາມສະແດງ
ດຳເນີນ JavaScript ເມື່ອປະກອບສິ່ງທີ່ສາມາດຕິດຕັ້ງໄດ້ຍ້າຍອອກຈາກບ່ອນຕິດຕັ້ງ
<div ondragleave="myFunction(event)"></div>
ບ່ອນທີ່ຢູ່ລຸ່ມມາດຕະການ TIY ຫຼາຍຫຼາຍອີກຫຼາຍອີກ
ວິທິການ
ໃນ HTML:
<element ondragleave="myScript">
ໃນ JavaScript:
object.ondragleave = function(){myScript};
ໃນ JavaScript，ນຳໃຊ້ addEventListener() 方法:
object.addEventListener("dragleave", myScript);
ຄວາມເຫັນ:Internet Explorer 8 ຫຼືຫຼາຍກວ່ານັ້ນບໍ່ສາມາດສະໜັບສະໜູນ addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
ການສະໜັບສະໜູນບັນດາບັນຊີວິດິໂລ
ຈຳນວນສະບັບໃນຕາລາງສະແດງຄວາມສາມາດສະໜັບສະໜູນການຖະແຫຼງການຄັ້ງທຳອິດຂອງບັນດາຄົນນໍາໃຊ້ບັນຊີວິດິໂລ
| ການຖະແຫຼງການ | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
ຄວາມສະແດງ
ການສະແດງທີ່ພິສູດທີ່ມີການຖອກຖົກຢູ່
<p draggable="true" id="dragtarget">ຖອກມານັ້ນ!</p>
<div class="droptarget">ຍົກມານັ້ນ!</div>
<script>
/* ----------------- ການຖະແຫຼງການທີ່ຖືກກະຕຸ້ນຈາກເປົ້າໝາຍຖອກຖົກ ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()ກົນລະບຽບລັກສະນະຂອງຂໍ້ມູນຖອກຖົກ
event.dataTransfer.setData("Text", event.target.id);
// ທີ່ເລີ່ມຖອກຖົກ p 元ປະກອບຄຳຄວາມ
document.getElementById("demo").innerHTML = "ເລີ່ມຖອກຖົກ p 元ປະກອບຄຳຄວາມ.";
// ທີ່ຖອກຖົກ p 元ປ່ຽນຄວາມບໍ່ກະຈັງ
event.target.style.opacity = "0.4";
});
// ທີ່ຖອກຖົກ p 元ປະກອບຄຳຄວາມປ່ຽນສີວິຈານ
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// ສຳເລັດການຖອກຖົກ p 元ປະກອບຄຳຄວາມຈາກບັນຍາຍແລະການລະບຽບຄວາມບໍ່ກະຈັງ
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "ສຳເລັດການຖອກຖົກສັນຍານ p.";
event.target.style.opacity = "1";
});
/* ----------------- Event ທີ່ເກີດຂຶ້ນໃນບ່ອນຕິດຕັ້ງ ----------------- */
// ເມື່ອ p element ທີ່ສາມາດຖືວັດຖຸເຂົ້າໃນ droptarget ປ່ຽນຮູບແບບ border DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// ດົນມາດບໍ່ສາມາດຕິດຕັ້ງ data/element ໃນ element ອື່ນ. ເພື່ອອະນຸຍາດຕິດຕັ້ງ ພວກເຮົາຕ້ອງປ້ອງກັນການດຳເນີນຄວາມການບັນທຶກຂອງ element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// ເມື່ອ p element ທີ່ສາມາດຖືວັດຖຸອອກຈາກ droptarget ປ່ຽນຮູບແບບ border DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - ປ້ອງກັນການດຳເນີນຄວາມການບັນທຶກຂອງບັນຊີບັນນາທິການ (ການຕິດຕັ້ງແບບທີ່ມາເປັນລາຍການ)
ປ່ຽນສີຂອງຂຽນອອກພາບແລະສີຂອງ border DIV
ນຳໃຊ້ method 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>
