jquery + isimli kütüphane sayesinde web sitelerine büyük bir hareketlenme geldi. bu yazılımın bu kadar sevilmesindeki en büyük neden belki de kolay anlaşılması ve en zor efektleri bile kısa komutlarla uygulama imkanı vermesidir. açık kaynaklı bir teknoloji olduğu için (javascript) 3. kişiler kolayca eklentiler üretebiliyor ve jquery sürekli güncelliğini korumayı başarıyor.bu yazıda çok profesyonelce hazırlanmış bir eklenti tanıtılacak. bu eklenti sayesinde web sayfanızdaki her şeyi mouse ile tutup bir yere sürükleme özelliği katabilirsiniz ancak sadece tut-sürükle-bırak ritüeline sıkışmak zorunda değilsiniz. ek olarak onlarca opsiypnu bulunuyor. eklentinin hüneri de zaten opsiyonlarında gizli.______________detaylar______________
jquery indirEklentiyi indireklenti anasayfasılisans koşullarıgenel demo sayfası______________ basic ______________
en basit biçimde web sayfasındaki herhangi bir öğeyi mouse ile sürüklemenizi sağlar.demo______________ relative ______________
öğeleri sayfa içinde sınır tanımadan sürüklenebilir olmasını sağlar.demo______________ axis ______________
öğeyi sadece tek eksen üzerinde hareket edecek biçimde yapılandırır. sadece yatay veya düşey eksende hareket etmesini sağlar.demo______________ Grid ______________
öğenin sürüklenmesini adım adım hareket edecek biçimde düzenler. bu özellik bilhassa ses düzeyi arttırmak ve buna benzeyen görevleri yerine getiren kaydırma çubuklarında faydalı sağlıyor.demo______________ contain ______________
sürüklenen öğeye sınır getirip bu sınırların dışına sürüklenmesini engellemeyi sağlıyor. eğer sayfanızda bolca sürüklenebilen öğe varsa çoğunun sürüklenmesi sonucunda sayfanızın içi kaos bölgesine dönmemesi için faydalı olabilir.demo______________ circular ______________
öğeyi dairesel bir eksende sürüklemeyi sağlar. özellikle “color picker” adı verilen, renk seçmeye yarayan paletlerin dairesel bölümlerinde renk skalası üzerinde seçiciye dairesel bir işlevsellik katmakta kullanılıyor.demo______________ handle ______________
öğelerin tutulabilir yerlerini ayarlar. genellikle pencere görünümündeki öğelerin sadece başlık kısımlarından tutulup sürüklenmesini sağlar.demo______________ active ______________
öğenin sürüklendiği sırada tepki vermesini sağlar. öğenin renk değiştirmesi, gölge kazanması, arkaplanının değişmesi ve benzeri şeyler…demo______________ proxy ______________
öğenin yansımasını sürüklemeye yarar. taşınabilir yaptığınız öğeler bazen fazlaca büyük olabilirler. ya da bir video öğesini sürükletmek isteyebilirsiniz. böyle durumlarda ziyaretçilerin grafik işlemcileri zayıf ise akışkan bir sürükleme deneyimi yaşayamazlar. takılmalar olur. bu dezavantajı aşmak için, öğe sürüklenmek istenirse içi boş, sisteme yük bindirmeyen bir kutuyu sürüklemeye başlarsınız. bıraktığınız yere esas sürüklemek istediğiniz kutu bir anda taşınır. işletim sistemleri de (windows, linux vb) grafik işlemcisi yetersiz olduğunda öğeleri sürüklemek için bu metoddan faydalanırlar.demo______________ z-index ______________
z-index, derinlik indeksi demektir. iki ve daha fazla sürüklenebilir öğe üst üste geldiğinde sürükleyeceğiniz öğe bütün öğelerin altında bile kalmış olsa, sürüklediğiniz anda hepsinin üzerinde görünmeye başlar. bilindiği gibi “z” isimli matematik değişkeni, 3 boyutlu uzayda derinlik değerini tutan değişkendir.demo______________ revert ______________
öğeler adreslerini bilir hale gelir. bir öğeyi nereye sürüklerseniz sürükleyin, bıraktığınızda başlangıç noktasına geri dönmesini sağlar.demo______________ multi ______________
aynı anda 2 ve daha fazla öğeyi sürüklemeyi sağlar. bir defada sürüklemek istenen öğeler tıklanarak işaretlenmelidir. öğe seçimi bittiğinde herhangi bir öğeyi sürüklemeye başladığınızda işaret koyduğunuz öğelerin hepsi mouse hareketinizi takip etmeye başlar. oldukça kullanışlı bir özellik.demo______________ offset ______________
mouse işaretini öğe üzerinde ortalar. bir öğeyi sürüklemeye başladığınız anda öğenin tam orta noktası mouse işaretinin altına getirilir. böylece öğeyi tam orta yerinden sürüklemeye devam edilebilir. sürüklemeyi kolaylaştırmaya yönelik bir özellik.demo______________ live ______________
dinamik biçimde sürüklenebilir öğe oluşturmanızı sağlar. html dökümanınızda sürüklenme özelliği olan hiç bir öğe bulunmasa bile, ziyaretçinin davranışlarına göre tepki amaçlı taşınabilir öğe oluşturmanızı sağlar. özellikle “alert box” gibi kullanıcıya anlık hata iletileri veren pencereler yapmakta faydalı olur.demo______________ which ______________
mouse’un sağ tuşuyla öğeyi sürüklemek gerektiğinde faydasını gösterir.demo______________ click ______________
bir çeşit sayaç fonksiyonudur. bir öğenin kaç defa tıklandığını sayar. sürüklenebilen her bir öğenin kendine özel bir de tıklama sayacı bulunur. istatistik tutmak istediğinizde iş görebilir.demo______________ not ______________
sürüklenebilir öğeler üzerinde kör noktalar oluşturmanızı sağlar. mesela taşınabilir kutu içinde link kullanıldığında bu linkten tutup kutuyu sürüklemek imkansız hale gelir.demo______________ distance ______________
sürüklemeye başlamadan önce avans değeri vermeyi sağlar. hemen tıklanır tıklanmaz yerinden oynamasını istemediğiniz öğeler varsa bunlara bir miktar avans verirseniz sürükleme miktarı avansı aşmadan öğe hareket etmez.demo______________ resize ______________
öğenin boyutlarını orantısızca değiştirmek için faydalıdır. bilindiği gibi resimleri kırpmak için klavuz yüzeylere ihtiyaç vardır. söz konusu katmanları üretmek için kullanılabilir.demo______________ resize2 ______________
resize ile aynı görevi yapar. ek olarak orantılı boyutlandırma özelliği bulundurur. öğelerin tam 8 noktasına boyutlandırma noktası ekler.demo______________ draw ______________
yazı tahtasına ihtiyacınız varsa işinizi görebilir. canvas desteği olan modern tarayıcılar üzerinde çalışmaktadır.demo__________________________________________kaynak : plugins | jquery__________________________________________Bu yazıda sürükleme işlemini çözmüş olduk. sonraki yazıda “drop” yani bırakma işlerini düzenleyen bir eklentiden bahsedeceğim. Takipte kalın…Devam edecek…
