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 indir
Eklentiyi indir
eklenti 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...
