HTML5 Sürükle ve Bırak Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

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

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3228)
RAPOR ET
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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol