bildirgec.org

drag hakkında tüm yazılar

jQuery ile taşınabilir nesneler yapma

admin | 06 August 2009 13:52

Mutlaka görmüşsünüzdür.Bir nesneyi istediğiniz yere taşıyabiliyorsunuz.Özellikle wordpress gibi sistemlerde bu çok yaygındır.Peki bunları nasıl yapıyorlar?
Aslında bunu yapmak Javascript için sayfalarca kod sürebilir.Ama jQuery için tek satır kod.Nasıl mı?Birlikte görelim:

Bu tekniği bize jQuery Ui sunuyor.Birkaç dosya include edicez tabi olsun o kadar.İlk önce include edeceğimiz dosyaları indirelim.
jQuery’yi indirmek için burayı
Buradan da indireceğiniz jQuery Ui özelliklerini seçerek ui.core ve ui.draggable dosyalarını indirin.

1
2
3
4
5
6
7
 
<script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/jquery.js"></script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/ui.core.js"></script>

<script type="text/javscript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/ui.draggable.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("div#box").draggable();

})

</script>

Burda “box” id’li div’e draggable yani taşınabilir özellik verdik.
Bir de bırakılabilir özellik alanlar var.Biz bunlara droppable diyeceğiz.
jQuery Ui sitesinden droppable işaretini de seçerseniz bu dosya da iner.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/jquery.js"></script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/ui.core.js"></script>

<script type="text/javscript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/ui.draggable.js"></script>

<script type="text/javascript" src="http://arsiv.pilli.com/ui.droppable.js">

<script type="text/javascript">

$(document).ready(function(){

$("div#box").draggable();

$("div#box2").droppable({

        accept: ".block",

	activeClass: 'droppable-active',

	hoverClass: 'droppable-hover',

	drop: function(ev, ui) {

		$(this).append("Bırakıldı!");

	}



});

})

</script>

Burda da draggable nesneyi droppable nesneye taşıdığımızda veya bıraktığımızda olacakları sıralıyoruz.Yukarıdaki “droppable-active” ve “droppable-hover” class’dır.
Gördüğünüz gibi birkaç kodla oluyormuş.Artık daha dinamik sayfalar hazırlayabilirsiniz.

HTML 5 Geliyor! Biraz Önizleme yapalım…

admin | 23 July 2009 12:00

Bu makalede sizlere HTML 5’in yeni gelen özelliklerini tanıtmaya çalışacağım. Emin olun sizi tatmin edecek 🙂

1. Canvas :
Canvas elementi sayesinde artık web üzerinde resim çizdirebileceğiz. Bu resimler animasyon olabilecek, sürekli olarak kontrol edilebilecek. Üstelik canvas sayesinde web tabanlı oyunlar bile yapılabilecek. Buna şimdilik 3 tane örneğim bulunmakta :
http://canvex.lazyilluminati.com/
http://www.benjoffe.com/code/games/torus/
ve canvasla ilgili bulabileceğiniz bir ton örneklerle : http://www.canvasdemos.com/

Yahoo! User Interface ile Drag & Drop

s4l1h | 28 May 2009 15:04

Yahoo Developer Network
Yahoo Developer Network

Merhabalar,
Spry Serisini bitirdikten sonra karşınızda bir kullanıcı arayüzü librarysi olan Yahoo! User Interface ile devam ediyoruz. YUI bir Yahoo Developer Network ürünü. Ayrıca başarılı olduğunu söylemek mümkün. YUI’ı LinkedIn gibi sitelerde kullanıyor. Sözü uzatmadan YUI ile Drag&Drop nesneler yapmaya başlayalım.

1
2
3
4
5
 
<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>

<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js" ></script>

<script type="text/javascript">

var dragg = new YAHOO.util.DD("drag");

</script>

Şimdi koda baktığımızda ilk iki satırda YUI’ı sayfaya dahil ettik. Son satırda var dragg ile draggable olacak yerleri işaretliyoruz.

1
 
new YAHOO.util.DD("drag");

Drag yazılı yere herhangi bir ID yada element girebilirsiniz.

1
2
3
4
5
6
7
 
<style type="text/css">

.pref {

width:90px;

height:75px;

background-color:FFFF66;

}

</style>

ile de 90*75 Sarı renkte bir kutu oluşturduk. 

1
 
<div id="drag" class="pref">HEY! DRAG ME!</div>

ile de “Drag” id’li bir div oluşturduk. Herşey bukadar. Bundan sonrası sizin yaratıcılığınıza kalmış.
Dış bağlantılar:
YUI anasayfası
YUI blog

Action Script ile Scroll İşlemi

admin | 14 February 2009 10:28

merhaba arkadaşlar geçen gün lazım oldu hazır bişeyler için baktım ama nafile, iş başa düştü yine çok profesyonel olmasada scroll işini görecek bir kod geliştirdim. beğenenler geliştirebilir. nesne üzerine mask atarak yukarı çıkan kısmı gizleyebilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
on (press) {

	

	//tıklandığında sürüklemeye başlıyoruz ve drg değişkine başladığına ilişkin bir değer atıyoruz.

	startDrag(this);

	_global.drg=1;

}

on(releaseOutside, rollOut)

{

	//mouse üzerinden çeklince ve basma işlemi bırakılınca sürüklmeyi bırakıyoruz.

	stopDrag();	

_global.drg=0;

}

on(release)

{

//tıklanıp bırakılınca da sürükleme işlemini bırakalım.

stopDrag();	

_global.drg=0;

}



onClipEvent (enterFrame) {

	

	boy=_parent.mc._height/_parent.cizgi._height;

	//burada her kaydırışta nesnemizin ne ne uzunlukta hareket edeceğini belirtiyoruz.

	//nesnein boyunu scroll boyuna bölerek bunu elde ediyoruz.

	//trace(boy);

	

	if(_global.drg==1 && this._x<>_parent.cizgi._x-this._width/2 )

	{

		//burada sadece y ekseninde sürüklensin diye x ekseni cizgiye hizalıyoruz.

		this._x=_parent.cizgi._x-this._width/2;

		trace("ta");

	}

	if(! this.hitTest(_parent.cizgi) )

	{

		//eğer sürüklediğimiz çubuk çizgi dışına çıkarsa çizgiye geri atıyoruz

		if(this._y>30)

		{

			//alttan çıkmışsa

		this._y=this._y-20;

		}

		else

		{

			//üstten çıkmışsa

			this._y=this._y+20;

		}

	}

	else if(_global.drg==1)

	{

		//eğer sürükleme işlemi devam ediyorsa

		konum=_parent.cizgi._y-this._y;

		//cizgi üzerindeki konumu bulalım

		trace("konum:"+konum);

		//son olarak da nesnemizin konumunu kaydıralım ve scroll işlemi çalışmış olsun

		_parent.mc._y=konum*boy;

	}

	

}

çalışma dosyası için.
http://rapidshare.com/files/196712767/scroll.fla.html

hyundai gator

populerSEEN | 09 June 2006 08:14

drag yarışlarının son halini haber veren bu araç hyundai gator !!
arka tekerleklere gizlenmiş iki büyük elektrik motorunun ışında,hidrojen yakıt hücreleri bulunduruyor.