banner
htmldersleri
Ana SayfaANA SAYFA Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
HTML Temel
HTML Giriş
HTML Elementler
HTML Etiketler
HTML Parametreler
HTML Biçimlendirme
HTML Özeller
HTML Bağlantılar
HTML Çerçeveler
HTML Tablolar
HTML Listeleme
HTML Formlar
HTML Resimler
HTML Arka Plan
HTML Renkler
HTML Renk Değerleri
HTML Renk İsimleri
HTML Hızlı Liste

HTML5 Ana Menü
HTML5 Giriş
HTML5 Anlamlandırma
HTML5 Giriş Tipleri
HTML5 Form Elementleri
HTML5 Form Özellikleri
HTML5 Canvas
HTML5 SVG
HTML5 Video
HTML5 Audio
HTML5 Konum
HTML5 Sürükle/Bırak
HTML5 Web Depolama
HTML5 Uygulama Bellekleme
HTML5 Web Çalışanı
HTML5 SSE

HTML Gelişmiş
HTML Tasarım
HTML Fontlar
HTML Stiller
HTML Başlık
HTML Meta
HTML URL
HTML Scriptler
HTML Std. Nitelikler
HTML Olaylar
HTML ASCII
HTML Web Sunucu

HTML Örnekler/Test
HTML Örnekler
HTML Örnek Site
HTML Test

HTML5 Sürükle ve Bırak

Önceki Sonraki

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


HTMLdersleri

Yukarıdaki resmi dikdörtgenin içine sürükleyin.


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


Examples

Başka bir Örnek

Resimi ileri geri sürükleme


Önceki Sonraki

Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
Copyright © 2008 | Tüm Hakları Saklıdır. | Webmaster: destek@htmldersleri.org

74 kişi şuan sayfamızda geziniyor.

English Deutsch Français Español Dutch Italiano Português Български
html dersleri
Dersler Örnekler Online Test