Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     Html5 ve Jquery ile sürükle bırak
     gürcü     30.01.2014     10:44:05

Html5 ile gelen yeni parametrelerle sürüklemeyi açma, sürüklemenin başlama veya bitme, üzerine gelme vs.. gibi anları yakalayarak basit bir sürükle bırak örneğini sizlerle paylaştım. Bu uygulamda da jquery kütüphanesinden faydalandığımızı göreceksiniz. Kodları inceleyiniz.



<html>

<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<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="’+id+’" ></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>
<!--
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.
-->
<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>

Facebook'ta Paylaş    
Diğer AJAX İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...