Gelişen teknoloji sayesinde işlerimiz çok daha kolay hale geldi. Kullandığımız telefonlardan yada bilgisayarlarda artık dokunmadık ekranlara alışmış durumdayız. Bu teknolojinin hayatımıza soktuğu bir yenilikle sürükle bırak (drag and drop) yöntemidir. Bu özelliği sayfalarımıza eklerken Html'in eski sürümlerinde dışarıdan yüklememiz gereken API'ler yardımıyla gerçekleştiriyorduk. Html 5'in bize sunduğu yenilikler den biri ise bu yöntemi içinde barındırıyor olması. Harici bir eklentiye gerek duymadan kodlarımız arasına yazacağımız bir kaç satır ile Html 5 uyumlu tarayıcılarda sürükle bırak yöntemini kolayca gerçekleştirebilme imkanımız oluyor. Drag and Drop işlemini yapabilmemiz için sürükleyeceğimiz ögeyi ve bırakma işleminin nerede olacağını belirlememiz yeterli olacaktır.
Sürükle bırak yöntemiyle Html 5 ile özellikleri dahilinde sayfamızda bulunan linkler , fotoğraflar varsayılan olarak sürükleme işlemi gerçekleştirilebilir. Sürüklene bilen ögelerimizi kopyalayabiliriz ve sürükleme işlemi dışında bu ögelerimize bağlantılar verebiliriz.
Basit bir örnekle açıklamak gerekirse;
Sürüklemek istediğimiz bir resme draggable özelliğini girmemiz sürükleme işleminin aktif hale gelmesini sağlayacaktır. Resmimizin sürükleme özelliğini aktifleştirdikden sonra sürükleneceği alanı da belirtmeliyiz.Bunun için;
-dragEnterHandler
-dragOverHandler
-dropHandler
Özelliklerini kullanmamız gerekmektedir.
Örneğimizde sürükle bırak yöntemi ile bir resmi silme işlemini gerçekleştirelim.
Bu örnek için sürüklenecek resimlerimiz ve bıraktığımız alanda silme işlemini yapacak resmimiz olacaktır.Silme işlemini yapacağımız resim sürüklenebilir bir resim olmasın istiyoruz. Html 5 ile resimlerimiz varsayılan olarak sürüklenebildiğin den bu resmimizin draggable özelliğine false değerini atayarak sürüklenemez hale getiriyoruz.
<img src="sürüklenecek resim url'si" id="resim" draggable" />
<img src="resmimizi bırakacağımız resim url'si" id="cop" draggable="false" ondragenter="return false" ondargover="return false" ondrop="silme()" />
Bu işlemimizi gerçekleştirecek olan JavaScript kodlarımızı ise sayfamızın <head></head> tagları arasına yerleştiriyoruz.
<script language="javascript">
function silme()
{
var gelen = document.getElementById("resim");
gelen.parentNode.removeChild(gelen);
}
</script>
Hiç yorum yok:
Yorum Gönder