HTML5 Sürükle ve Bırak Kodu

Sürükle ve Bırak, bir HTML5 standardıdır.


Sürükle ve Bırak

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 Firefox Opera Google Chrome Safari

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>

<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>

<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″

</body>
</html>

Kendin Dene »

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));
}