Drag Layer: Sayfanızda bulunan layerların yani katmanların sürüklenerek hareket ettirilmesini sağlar. Ayrıca bu özellik sayesinde layerların konumunu istediğiniz işleme göre değiştirebilirsiniz. Mesela bir butona tıklandığında X:22, Y:55 konumunda bulunan layerın konumunu X:66, Y:123 yapabilirsiniz.
Not: Bir katman aktif durumdaysa Drag Layer eylemi kullanılmaz.Eğer kullanılmaz durumda ise (gri olarak gösterilir), <body> etiketinin seçili olduğundan emin olun.
Drag Layer iki bölümden oluşmaktadır bular Basic ve Advanced Bu ilk aşamada size Basic ‘I anlatacağız.
Basic Ekranı aşağıdaki gibidir.
Basic Ekranındaki Layer ekli olan Draw layerini gösterir.
Movement:Hareket biçiminin hangi şekilde olacağını belirtir.(koordinatları kendinizde verebilrisiniz diğer seçeneği seçerseniz.
Drop Target : Draw layerini otamatik olarak bulunduğu koordinatı alır.
Snap if Within: Belirlenen genişliğie geldiğinde draw layeri istenen noktaya otomatik olarak oturucaktır(ileride detaylı şekilde görülücektir)
Yukarıkı resimde saydamızda ekli olan Draw Layerlerini görebilirsiniz.
Draw Layeri daha iyi anlayabilmek için bir uygulama yapalım bu uygulamada draw tagının kullanım şeklini ve mantığını anlayacaksınız.
Uygulama Adı: puzzle Yapımı
Adım1: Puzzel yapabilmek için bir resim dosyasına ihtiyacımız var ilk once bir resim dosyası alın ve onu paint ya da Photoshop da parçalara bölün (photoshop ile yapmanız tercih edilir.)
Adım2: Resim dosyalarını kesme işlemi bittikden sonra Dreamweaver’I açınız ve bir HTML sayfası oluşturunuz HTML sayfasını oluşturdukdan sonra Sayfaya bir Draw Layer ekleyiniz(Layout menüsü altındadır). Şekilde ‘de gösterilmektedir.
Adım3:Eklemiş olduğumuz Draw Layer’e arkaplan resmi ekleme (Bunun için Dıv tagı seçili olmalıdır ), arka plan resmi dediğim photoshop’da kesmiş olduğumuz resmin ilk parçası (Sol En üstden başlayınız) resim ekleme şekli aşağıdaki gibidir.
Mavi alanla seçili olan Bg İmage yazan bölgeye puzzelin ilk parçasının yolunu veriniz.
Örnek uygulama için benim kullandığım resim (bu uyugulama için en iyi örnek aslında bir harita üzerinde yapmaktır):
Adım4: Bu adımda eklemeiş olduğumuz Draw layere puzzelimizin birinci parçasını ekliyorum(mavi seçili alandada görüldüğü gibi resmin yolu (Browser) gözükmektedir.
Adım5:Şimdi Bir adet draw layer daha ekleyin ve bu layerede puzzelin ikinci paçasını ekleyin draw layere (üst şekildeki gibi)
Yukarıdaki görüldüğü gib ikinci layer’I ekledim ve layerin içine arkaplan olarak puzzelimin ikinci parçasını ekledim.
Adım6:Şimdide puzzelimizn üçüncü parçası için Draw Layer ekleyin ve draw layerin arkaplan resmi olarak puzzlein üçüncü resmini ekleyiniz
Üst şekildede görüldüğü gib draw layer lar alt alta dizilerek puzzelin bir bölümü oluşturuldu.
Şimdi puzzelin diğer parçalarınıda aynı şekilde ekleyelim.
Adım7:Puzzelin dördüncü parçasınıda yukarıda anlatılan şekilde ekleyiniz.
Adım8:Puzzelin beşinci parçası aşağıdaki gibidir.
Adım9:
Adım10:Resimleri Draw Tadlara ekledikden soran son görüntü şu şekildir.
Adım11:Oluşturmuş olduğumuz bu Draw Taglar Hareket edebilmesi için Tag Inspector paletinden (F9 kısayol Tuşu) faydalanacağız. Tag palatine gelin Behaviors’u seçin
Adım12: Draw layerlerden oluşturduğumuz birinci layere hareket ettirme işlemine başlayalım bunun için ilk once body Tag’ını seçiniz.ve Behaviors’a geliniz orada (+) işaretine basın ve açılan menüden Drag Layeri seçiniz ve aşağıdaki gib bir pencere açılacaktır.

-Layer yazan kısıma puzzelimizn birinci parçası olan resmin üzerinde buldunuğu divi seçiniz.
Ve Get Current position Butonuna basınız ve o sizing için otomatik olarak koordinatları versin.
Butona bastıkdan sonra dikkat edinizki aşağıda Snap if within yazan kısım otomatik olarak değer alacaktır bu değer hareket sırasında layeri belirtiğiniz koordinatların yakınından geçirirken otomatik olarak o o noktaya oturur bu mesafeyle puzzle resimlerinin yerleri belirlenecek.
Adım13:
Yukarıdaki şekilde de gözüktüğü gibi bu kooridanatlar 2 draw taga yani resmin ikinci parçasına ait.(Eğer Behaviors’da Drag Laye ‘I aktif olarak göremiyor iseniz Body Tag I aktif değildir Body tagını seçip ondan sonra Drag Layer deyiniz.).
Adım14: Bu işlemi son draw layera kadar uygulayın ve bütün layerlara uygulatın son layer aşağdıaki gibidir.
Adım15:Bütün layera Drag Layer uygulandıkdan sonra resmilerin yerlerini değişin ve save deyip kaydedin bu şekil. Ve Tarayıcıda çalıştırın.
Adım 16: Tarayıcdaki son görüntü aşağıdaki gibidir(Activex Denetimine izin vermyei unutmayınız)
Adım17: Ve son hali olarak dizilmiş hali aşağıdadır.
Kaynak: Samet ERDEM