Mouse event’lerini web uygulamasında yakalamak çeşitli javascript kütüphaneleri ile daha zevkli hale geldi. Bunlardan bir taneside Microsoft’un Asp.Net Ajax kütüphanesi. Oldukça basit ancak bir çok hamallık olarak nitelendirebileceğimiz işten kurtarıyor bizi…Aşağıda Asp.Net Ajax kütüphanesini kullanarak bir “div” i hareket ettirmeye başlıyoruz…Bundan sonraki yazım umarım sürükle bırak ile ilgili olacak.(Üşenmezsem…:))
Öncelikle http://www.asp.net/ajax/ adresinden Asp.Net Ajax’ın client *.js’lerini indirmeniz gerekmekte. İndirdiğiniz dosyalar arasından şimdilik MicrosoftAjax.js’i kullanıyor olacağız.Öncelikle bu basit örneğimiz için sayfamızın body kısmını oluşturuyoruz.Aşağıdaki kod parçacığını body tag’inin içine yazmamız yeterli olacaktır.
27 <form id=“form1” runat=“server”>
28 <div id=“divMain” style=“width: 100%; height: 100%; background-color: Gray;”>
29 <div id=“divClickMe” style=“width: 200px; height: 200px; background-color: Red”>
30 </div>
31 X:<asp:Label runat=“server” ID=“lblXCor” Text=“”></asp:Label>
32 Y:<asp:Label runat=“server” ID=“lblYCor” Text=“”></asp:Label>
33 </div>
34 </form>
Bu kod ile aşağıdaki gibi bir görüntü elde edeceğiz.
Şimdi amacımız, bu kırmızı kareyi(div) gri alan içinde hareket ettirmek olacak, ki bunu da Asp.net Ajax’ın sağladığı kolaylıklar ile yapacağız.
Bunun için aşağıdaki kod bloğunu sayfamızın head kısmına ekliyoruz.
27 //Asp.Net Ajax Client API’sini sayfamıza ekliyoruz.
28 <script src=“MicrosoftAjax.js” type=“text/javascript”></script>
29
30 <script>
31 //PageLoad methodu,sayfamız yüklendiğinde istemci tarafında
32 //otomatikman çalışacaktır.Aynı Asp.Net’in server tarafında olduğu gibi
33 function pageLoad(sender, args) {
34
35 //Sys.UI.DomEvent namespace’inde ki addHandler methodu ile, DOM objelerine
36 //olay ataması yapabiliyoruz.Aşağıdaki kod bloğunda, divMain id’li div’lerde
37 //fare ile ilgili bir olay olduğu zaman hangi metodların çağırılacağını belirtiyoruz.
38 //Fareye tıklandığı zaman ShowWhatHappened metodu,
39 //Fare hareket ettiğinde de WhereIsTheMouse metodu çalışacaktır.
40 Sys.UI.DomEvent.addHandler($get(“divMain”), “mousedown”, ShowWhatHappened);
41 Sys.UI.DomEvent.addHandler($get(“divMain”), “mousemove”, WhereIsTheMouse);
42
43 }
44
45 function ShowWhatHappened(e) {
46 //Sys.UI namespace’indeki MouseButton nesnesi ile, istemci tarafında
47 //gerçekleşen olayın özelliklerini kontrol edebiliyoruz. Burada sol tuşa
48 //tıklandığını anlıyoruz.
49 if (e.button == Sys.UI.MouseButton.leftButton) {
50 //Farenin hareketlerine göre divClickMe div’inin yerini değiştiriyoruz.
51 $get(“divClickMe”).style.position = “relative”;
52 $get(“divClickMe”).style.top = e.offsetY;
53 $get(“divClickMe”).style.left = e.offsetX;
54 }
55
56 }
57 function WhereIsTheMouse(e) {
58 //Farenin kordinatlarını ekrana yazdırıyoruz.
59 $get(“lblXCor”).innerHTML = e.offsetX;
60 $get(“lblYCor”).innerHTML = e.offsetY;
61 }
62 </script>
Bütün bunlardan sonra, gri alan içerisinde faremizi tıkladığımız yere kırmızı kare hareket edecektir.Bazı işlemler bu tarz javascript kütüphaneleri ile oldukça kolay hale geliyor…Ne güzel değil mi…:D