Jquery ile Çek-Bırak Kodu

Mobil Mod28 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(https://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=’https://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="https://hakkicengiz.com/hc/cekbirak/jquery.js"></script>
<script type="text/javascript" src="https://hakkicengiz.com/hc/cekbirak/jquery.easydrag.js"></script>
<script type="text/javascript" src="https://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(https://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='https://img.webme.com/pic/k/karanlik7/rozet1.png', sizingMethod='scale'); 	} </style>  <script type="text/javascript" src="https://hakkicengiz.com/hc/cekbirak/jquery.js"></script>   <script type="text/javascript" src="https://hakkicengiz.com/hc/cekbirak/jquery.easydrag.js"></script>   <script type="text/javascript" src="https://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

Son Yorumlar

  • Kopye Kağıtları » Hakkı Cengiz : […] WordPress KOD DEPOSU - 1.819 […]
  • Hakkı Cengiz : Güncelleme: - cozumpark.com/blogs/windows_server/archive/2009/02/08/iis-7-uzerinde-phpmyadmin-kurulumu.aspx - eyurtsever.com/index.php/windows-10-iis-kurulumu-resimli-anlatim - renklikodlar.net/DERSLER/Internet_Information_Services_IIS_kurulumu hakkatten çooook uzun yoldan gitmişim.
  • machodolar : I know it's hard to comprehend but there will be days that you DON'T GIVE A SINGLE FUCK about any romantic relationship. Your whole being is more rational than your conscious mind and will do the necessary changes in time. So stop whining and get to work. Cheers. Machodolar
  • Hakkı Cengiz : sağol gardaşım yorumunu dikkate alarak bikaç rütüş attım
  • Hakkı Cengiz : I can walk into a room without you And I don't get drunk and talk about you So I guess I've learned to live without you I just don't know how to love without you
Özlü Söz