HTML5 Sürükle ve Bırak Kullanımı

Anasayfa

HTML5 derslerimize devam ediyoruz.Bu derste drag and drop yani sürükle ve bırak özelliğini işleyeceğiz.Html5 ile gelen yeni parametrelerle sürüklemyi açma,sürüklemenin başlama veya bitme,üzerine vs gibi anları yakalamamıza yarıyor.Parametreleri açıklayarak başlayalım.

draggable : true-false değeri alır.Sürüklemeyi açmak veya kapatmak için.
ondragstart :Sürüklemenin başladığı anı yakalar.Sürüklenen objeye verilir.
ondragover :Sürüklenen bir obje ile üzerine geldiği anı yakalar.
ondragleave :Sürüklenen bir obje ile üzerinden çıktığı anı yakalar.
ondrop :Sürüklenen objenin üstüne bırakıldığı anı yakalar.
ondragenter :Sürüklenen bir obje ile üzerinde hareket edildiği anı yakalar.
ondragend :Sürüklemenin bittiği anı yakalar.

Parametrelerimiz bu kadar.Şimdi basit bir örnek yapalım.

İncele : http://ustaderslik.com/ornek/drag_and_drop.html



<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<title>UstaDerslik</title>

	<script type="text/javascript">

		var id="",

			  hover="";

		function hareket(e){

				id=e.target.id;

			}

			function gel(e){

				e.preventDefault();

				hover=e.target.id;

				$(".cember").css("opacity",".3");

			}

			function git(){

				$(".cember").css("opacity","1");

			}

			function birak(e){

				$("#"+id).remove();

				$("#"+hover).html('<div class="daire" ></div>');

				$(".cember").css("opacity","1");

			}



	</script>

	<style type="text/css">

		.daire{width:100px;height:100px;background:#fc584b;border-radius:50px;}

		.cember{width:100px;height:100px;padding:3px;border:2px solid #fc584b;border-radius:60px;margin-left:30px;}

	</style>

</head>

<body>

	

	<div class="cember" id="cember"  ondrop="birak(event)" ondragover="gel(event)" ondragleave="git()"></div>

	<div class="daire" id="daire" draggable="true" ondragstart="hareket(event)" ></div>

	

</body>

</html>

Daire ve çember diye 2 objemiz var.Daireyi sürükleyip çemberin üzerine geldiğimiz görüntü şu şekilde :

http://ustaderslik.com/resim/ders/45487sd54.png

Çemberin üzerinde bıraktığımızda görüntüsü :

http://ustaderslik.com/resim/ders/s4dsd548.png

Şimdi kodlara geçelim.Sürükleme başladığında hareket() fonksiyonunu çağırıyoruz.Bunda

id=e.target.id;

diyerek sürüklenen objenin idini değişkene atıyoruz.
Daha sonra çemberin üzerine geldiğimizde gel() fonksiyonunu çağırıyoruz.

e.preventDefault();

hover=e.target.id;

$(".cember").css("opacity",".3");

Burada jqeury kodu olan preventDefault kullanmazsanız çalışmaz.Objenin diğer işlevlerini kapatıyor.Bizde kendi işimizi yapıyoruz.Üzeine gelinen objenin idinide değişkene atayıp çemberin opaklığını düşürüyorum.

Daha sonra git() fonksiyonu ile sürüklenen obje ile üzerinden gidilirse opaklığını artırıyoruz.

En sonda ise birak() fonksiyonu ile üzerine sürüklenen obje bırakılırsa sürüklenen objeyi siliyoruz.üzerine bırakılan objenin içine sildiğimiz daireden bir tane atıyoruz ve çemberin opaklığını artıyoruz.

Temel kullanımı bu şekilde.

HTML5 Sürükle ve Bırak Kullanımı

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik