Sürükle-Birak (Drag and Drop) Islemleri

Sürükle ve Birak islemleri web sayfalarinda cok kullanilan oldukca hos bir ozelliktir.
Bir html ogesinin tutulup baska bir alana tasinmasi islemidir,Bu yontemi kullanarak Guzel uygulamalar olusturabilirsiniz,(Eslestirmeli Sorular gibi)

Bu surukle birak islemlerini Drag and Drop arayuzunu kullanarak yapacagiz.
Surukleme isleminin yapilabilmesi icin html ogesi asagidaki gibi suruklenebilir olmalidir.(Resimler ve Linkler bu ozellige zaten sahiptirler)

 <div draggable="true" id="div1">Suruklenebilir</div>
Suruklenebilir

Sadece suruklenebilir ozelligi olan div elementini surulemeye calisarak etkiyi gorebilirsiniz.


Surukleme islemleri esnasinda degisik zamanlarda tetiklenen olaylarin listesini gorelim.
ondrag Surukleme islemi esnasinda calisir.(kaynak icin)
ondragend Surukleme islemi bitince calisir.(kaynak icin)
ondragenter Tasinan oge(Kaynak oge) hedefe ulasinca/girince ,(hedef eleman icin tetiklenir)
ondragleave Tasinan oge(Kaynak oge) hedef elemanin uzerinden ayrilinca tetiklenir(hedef eleman icin tetiklenir)
ondragover Tasinan oge(Kaynak oge) hedef uzerinde suruklendiginde tetiklenir.(hedef eleman icin tetiklenir)
ondragstart Surukleme islemi baslayinca kaynak(tasinan) eleman icin tetiklenir.
ondrop Kaynak oge hedefe ulasip birakilinca tetiklenir(hedef icin)

dataTransfer nesnesi:Birazdan gorecegimiz gibi event nesnesi uzerinde tasinir ve sürükleme verilerini yönetmek için farkli yöntemlere/ozelliklere sahiptir.


Bukadar aciklama ardindan en sade haliyle bir ornek yapalim.(css kodlarini vermedim )

Kaynak





<div id="ornek">
	<div id="kaynak" draggable="true"  ondragstart="suruklemeBasladi(event)" >Kaynak</div>
	<br>
	<div id="hedef" ondrop="hedefeUlasti(event)" ondragover="hedefUstunde(event)"></div>
</div>

<script>
function varsayilanDavranisiIptalEt(e){
	e.preventDefault();
}

function suruklemeBasladi(event){
	//suruklenen verilerin veri turunu dataTransfer nesnesi yardimiyla ayarlayalim
	//asagida suruklenen ogenin veri turu text olarak atandi
	//event.target.id=kaynak
	 event.dataTransfer.setData("text", event.target.id);
}

function hedefeUlasti(event){
	//varsayilan bazi davranislari degistirmek gerekiyor
	//tasinan oge hedefe birakilabilmelidir
	varsayilanDavranisiIptalEt(event);


	//suruklenen verileri al
	//getData() yontemiyle verileri alacagiz
	//daha once setData() ile ayarlanan ayni turdeki veriyi aliyoruz
    var veri = event.dataTransfer.getData("text");

    //suruklenen ogeyi hedefe ekle
    event.target.appendChild(document.getElementById(veri));


	 //hedefin icin css ayari yapalim
    event.target.style.border ="none";

   
}

function hedefUstunde(event){
	//varsayilan bazi davranislari degistirmek gerekiyor
	//ornegin varsayilan olarak bir oge baska bir oge uzerine birakilamaz
	 varsayilanDavranisiIptalEt(event);
}

</script>







Asgidaki ornekte ise tetiklenen bazi olaylarin durumu inceleniyor.

Olay durumlari.


<div id="genel">
	<img src="img/kizogrenc.jpg" id="resim1" draggable="true" title="resim1" />
	<div id="hedefalan"></div>
	<img src="img/ogrenci.jpg" draggable="true" id="resim2" title="resim2" />
</div>

<div id="sonuclar">
	Olay durumlari. <br>
</div>

<script>

//kapsayici elementimizi alalim
var genel=document.getElementById("genel");

//sonuclari gostereceimiz alani alalim
var sonuc=document.getElementById("sonuclar");


//olaylarin durumunu gosterecegimiz fonksiyon
function goster(id,olay){
	sonuc.innerHTML ="<b>"+id+"</b> icin <b>"+olay+"</b> basladi <br/>";
}


//Kullanici bir ogeyi suruklemeye basladi bilgilerini alalim
genel.addEventListener("dragstart",function(e){
	e.dataTransfer.setData("text",e.target.id);

	//drag nedeniyle ekranda gorunmeyecek
	goster(e.target.id,"dragstart");
});

//Kullanici bir ogeyi surukluyor 
genel.addEventListener("drag",function(e){
	goster(e.target.id,"drag");
});


//suruklenen oge hedefe ulasti
genel.addEventListener("dragenter",function(e){
	if(e.target.id=="hedefalan"){
		e.target.style.border="2px dotted green";
		goster(e.target.id,"dragenter");
	}
});


//suruklenen oge hedef ustunde
genel.addEventListener("dragover", function(e) {
    e.preventDefault();

  	if(e.target.id=="hedefalan"){
		goster(e.target.id,"dragover");
	}
});


//suruklenen oge hedef ustunden ayrildi
genel.addEventListener("dragleave", function(e) {
  	if(e.target.id=="hedefalan"){
		goster(e.target.id,"dragleave");
		e.target.style.border="";
	}
});

//suruklenen oge hedefe birakildi
genel.addEventListener("drop", function(e) {
	 e.preventDefault();

  	if(e.target.id=="hedefalan"){
		goster(e.target.id,"drop");
		
		 var veri = e.dataTransfer.getData("text");

		//gelen resimlerim margin-left degerini kaldiralimki hedefe tam sigsin
		document.getElementById(veri).style.marginLeft ="0px";

        e.target.appendChild(document.getElementById(veri));
	}
});

</script>

<style>
#genel {
	border:1px solid silver;
	padding:40px;
	overflow:auto;
}

#genel img,#genel div{
	width: 100px;
	height:105px;
	display: inline-block;
	border:1px solid silver;
	margin-left:40px;
}

#genel div{
	float: right;
	overflow:hidden;
	margin-left:0px;
}
</style>

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com