Jquery ile Çek-Bırak Kodu

28 Ocak 2016 tarihinde Hakkı Cengiz yazmıştır.

jQuery ile herhangi bir eklenti kullanmadan çek-bırak kodu yapıyoruz. Ve WordPress e entegre edeceğiz. Sorularınız olursa lütfen yorum yazın. Çek-Bırak kodunu ilk olarak e-burhan.com'da görmüştüm. Bende sizlere üç adımda kısaca anlatmak isterim.

Adım 1:

-İlk önce bir icerik alanı (div) oluşturuyoruz. Ve içerisine rozetin alan kodunı (div) yerleştiriyorsnuz.

<div id=”rozet“>v2</div>

Adım 2:

Daha sonra wordpress  sitemizin style.css dosyasına altta vericeğim kodları ekleyeceğiz.

div#rozet {
position: absolute;
width: 77px;
height: 77px;
top: -40px;         / burasını rozetin nerede olmasını isterseniz
left: -40px;         / ona göre değer verin.
text-indent: -9999px;
background: url(http://hakkicengiz.com/hc/cekbirak/snow.png) 0 0 no-repeat;
/* IE 6 için saydamlık probleminin çözümü */
_background: transparent;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’http://hakkicengiz.com/hc/cekbirak/snow.png’, sizingMethod=’scale’);
}

üstte verdiğim kodun haricinde javascript kodlarını da ekleyerek kod tamamlanmış oluyor.

Adım 3:

Bu adımda alttaki kodları çek-bırak kodumuzu göstermek istediğimiz yere ekliyoruz.

<script type="text/javascript" src="http://hakkicengiz.com/hc/cekbirak/jquery.js"></script>
<script type="text/javascript" src="http://hakkicengiz.com/hc/cekbirak/jquery.easydrag.js"></script>
<script type="text/javascript" src="http://hakkicengiz.com/hc/cekbirak/jquery.easing.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#rozet").easydrag();
$("div#rozet").ondrop(function(){
$('div#rozet').animate(
{ top:'-40px', left:'-40px'}, / üstteki yeri degistirirseniz burayıda degistirmelisiniz.
{duration: 1000, easing: 'easeOutElastic'}
);
});
});
</script>

Kodları bütün halde alttadır.

<title>hakkicengiz » jQuery ile "çek-birak" özellikli nesneler olusturmak</title> <style type="text/css">  	div#icerik { 		position: relative; 		margin: 0 auto; 		width: 450px; 		padding: 5px 10px; 		border: 5px solid #444; 		background-color: #7f8183; 		color: #fff; 		font: normal 12px/18px "Trebuchet MS"; 	} 	 	div#rozet { 		position: absolute; 		width: 77px; 		height: 77px; 		top: +20px; 		left: 30px; 		text-indent: -9999px; 		background: url(http://img.webme.com/pic/k/karanlik7/rozet1.png) 0 0 no-repeat; 		/* IE 6 için saydamlyk probleminin çözümü */         _background: transparent;         _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.webme.com/pic/k/karanlik7/rozet1.png', sizingMethod='scale'); 	} </style>  <script type="text/javascript" src="http://hakkicengiz.com/hc/cekbirak/jquery.js"></script>   <script type="text/javascript" src="http://hakkicengiz.com/hc/cekbirak/jquery.easydrag.js"></script>   <script type="text/javascript" src="http://hakkicengiz.com/hc/cekbirak/jquery.easing.js"></script>   <script type="text/javascript">
	$(document).ready(function(){

		$("div#rozet").easydrag();

		$("div#rozet").ondrop(function(){
			$('div#rozet').animate(
				{ top:'+20px', left:'30px'},
				{duration: 1000, easing: 'easeOutElastic'}
			);
		});

	});
</script> <div id="icerik">dfs <div id="rozet">v2</div> </div>

 

Önizleme

Henüz yorum eklenmemiş bi yorum atmaya ne dersin?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Dost Siteler

Etiketler