bildirgec.org

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