Örnek
Bir sürüklenebilir eleman bir damla hedefin dışına taşındığında bir JavaScript yürütün:
<div ondragleave="myFunction(event)"></div>
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
Bir sürüklenebilir eleman veya metin seçimi geçerli bir bırakma hedefi ayrıldığında ondragleave olayı oluşur.
OnDragEnter ve ondragleave olaylar kullanıcı bir sürüklenebilir eleman girebilir veya bir bırakma hedefi bırakmak üzere olduğunu anlamak için yardımcı olabilir. Bu sürüklenebilir eleman bırakma hedefi giren bir arka plan rengini ayarlamak ve eleman bırakma hedefinin dışına taşındığında renk kaldırarak, örneğin, yapılabilir.
Sürükle ve bırak HTML5'teki çok yaygın bir özelliktir. Eğer zaman olduğu "grab" bir nesneyi ve farklı bir konuma sürükleyin. Daha fazla bilgi için, bizim HTML Eğitimi bkz HTML5 sürükle ve bırak .
Not: Bir eleman sürüklenebilir hale küresel HTML5 kullanmak için sürüklenebilir niteliği.
İpucu: Bağlantılar ve resimleri varsayılan olarak sürüklenebilir, ve gerek yoktur draggable niteliği.
Orada kullanılan birçok olaylardır ve sürükle ve bırak işleminin farklı aşamalarında ortaya çıkabilir:
- Sürüklenebilir hedefe ateş Olaylar (the source element) :
- ondragstart - Kullanıcı bir eleman sürüklemek başladığında meydana
- ondrag - bir eleman sürüklenirken oluşur
- ondragend - Kullanıcı elemanı sürükleme bittikten oluşur
- Damla hedef üzerinde ateş Olaylar:
- OnDragEnter - sürüklenen eleman bırakma hedefi girdiğinde
- OnDragOver - sürüklenen eleman bırakma hedefinin üzerinde olduğunda oluşur
- ondragleave - sürüklenen eleman bırakma hedefi ayrıldığında oluşur
- ondrop - sürüklenen eleman damla hedefe bırakıldığında oluşur
Tarayıcı Desteği
Tablodaki rakamlar tamamen olayı destekleyen ilk tarayıcı sürümü belirtin.
Olay | |||||
---|---|---|---|---|---|
ondragleave | 4.0 | 9.0 | 3.5 | 6 | 12.0 |
Sözdizimi
HTML'de:
JavaScript:
object .ondragleave=function(){ Kendin dene "
JavaScript olarak, kullanılarak addEventListener() metodu:
object .addEventListener("dragleave", myScript );
Kendin dene " Not: addEventListener() metodu Internet Explorer 8 ve önceki sürümlerinde desteklenmez.
Teknik detaylar
Kabarcıklar: | Evet |
---|---|
iptal Edilebilir: | Yok hayır |
Etkinlik tipi: | DragEvent |
Desteklenen HTML etiketleri: | Tüm HTML öğeleri |
DOM Versiyon: | Düzey 3 Olaylar |
Diğer Örnekler
Örnek
TÜM olası sürükle ve bırak olayları bir gösteri:
<p draggable="true" id="dragtarget">Drag me!</p>
<div
class="droptarget">Drop here!</div>
<script>
/* ----------------- Events fired on the drag target
----------------- */
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the
dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p
element.";
// Change the opacity of the
draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color
of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output
some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p
element.";
event.target.style.opacity = "1";
});
/* ----------------- Events fired on the drop target
----------------- */
// When the draggable p element enters the
droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if (
event.target.className == "droptarget" ) {
event.target.style.border =
"3px dotted red";
}
});
// By default, data/elements cannot be dropped in
other elements. To allow a drop, we must prevent the default handling of the
element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves
the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if (
event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data
(default is open as link on drop)
Reset the color of the output text and
DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged
element ("drag1")
Append the dragged element into the drop element
*/
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>
Kendin dene " İlgili Sayfalar
HTML Eğitimi: HTML5 sürükle ve bırak
HTML Referans: HTML sürüklenebilir Özellik
Olay Nesne