Html5 ile sürükle bırak işlemi
İyi günler arkadaşlar internet kullanımının mobilde kullanımının gittikçe arttığı günümüzde mobilde daha kullanışlı siteler yapmamızı sağlayan bir html5 özelliğini sizlere anlatmak istiyorum.
Html 5 ile gelen sürükle bırak işlemimiz için aşağıdaki kodları bilmemizde fayda var
- draggable: Kodumuz nesnenin sürüklenebilme özelliğini belirler. resimlerde default olarak true yani sürüklenebilir olarak belirlenmiştir. kullanımı draggable="true" yani sürüklenebilir veya draggable="false" sürüklenemez şeklindedir.
- ondragover: Resmin Sürükleneceği alandır kullanımı ondragover="return false;"
- ondragenter: Yine resmin Sürükleneceği alandır kullanımı ondragenter="return false;"
- ondrop: Bu fonksiyonumuzda Resim Sürüklendikten sonra yapılacak işlemdir.
Evet Açıklamalarımızıda yaptığımıza göre Artık kodlara geçebiliriz
Kodlarımız <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#resim").hover( // resme tıklandığında body ile ilgili birkaç tasarım yaptık
function(){
$("body").css({
"border":"4px dashed #ddd",
"border-radius":"5px"
});
$("#cop").css({"border":"3px solid red"});
},
function(){
$("body,#cop").css({"border":"none"});
});
});
// asıl işlem gören fonksiyonumuz burdadır.
function resimSil() {
$("#resim").hide(); // resmi gizledik
$(".metin").html("Resim Başarıyla silindi"); // metnimizi değiştirdik
}
</script>
</head>
<body>
<div style="width:700px;margin:0 auto;">
<img src="images/ben.png" width="300" id="resim" style="float:left;cursor:move;" /><br>
<img style="float:right" id="cop" src="images/cop.png" draggable="false" ondragover="return false" ondragenter="return false" ondrop="resimSil()" />
<p class="metin" style="clear: both;"> Resmi Silmek için Çöp Kutusuna sürükleyiniz </p>
</div>
</body>
</html>
Çalışma kodlarını Buradan İndirebilirsiniz.
Hiç yorum yok:
Yorum Gönder