HTML5 ve jQuery ile sürükle bırak yaparak silme işlemi
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.