Sürükle ve bırak çok bilinen ve ortak olan bir özelliktir. Bir nesneyi tutmak ve başka bi yere götürmek anlamına gelir.
HTML5'te herhangi bir element ya da nesne taşınabilir.
Tarayıcı Desteği
Internet Explorer 9+, Firefox, Opera, Chrome, ve Safari "Sürükle ve Bırak" özelliğini destekler.
Not: Safari 5.1.2. versiyonunda çalışmaz.
HTML5 Sürükle ve Bırak Örneği
Aşağıda basit bir örnek görülmektedir:
Örnek
<!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>
Karışık görülebilir, o zaman sürükle ve bırak olayının diğer tüm farklı kısımlarına bir bakalım.
Bir elementi sürüklenebilir hale getirme
Her şeyden önce: Bir elementi sürüklenebilir hale getirmek için, "draggable" özelliğini "true" yapın:
<img draggable="true">
Neyi Sürükleyeceğiz? - ondragstart ve setData()
Sonra, element sürüklendiğinde ne olması gerektiğini belirtin.
Yukarıdaki örnekte, ondragstart özelliği drag(event) denilen, hangi data'nın sürükleneceğini belirten bir fonksiyonu çağırmış.
DataTransfer.setData() metodu sürüklenen data'nın data tipini ve değerini ayarlar:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);
}
Bu durumda, data tipi "text" ve değer (value) ise sürüklenebilen elementin id'sidir. ("drag1").
Nereye Sürükleyeceğiz? - ondragover
ondragover olayı (event) sürüklenen datanın nereye bırakılacağını (drop) belirtir.
Varsayılan olarak, veriler/elementler başka elementlerin içine bırakılamaz. Bir bırakma işlemine izin verebilmek için,
elementin varsayılan kullanılma biçimini önlemeliyiz.
Bu iş ondragover event'i için event.preventDefault() metodu çağrılarak yapılır:
event.preventDefault()
Bırakma İşlemini Yapma - ondrop
Sürüklenen bir data bırakıldığında, bir "drop event" meydana gelir.
Yukarıdaki örnekte, ondrop özelliği drop(event) denilen bir fonksiyon çağırmış:
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}