|
HTML tabanlı bir uygulamaya veya uygulamadan (veya bir HTMLLoader öğesinde görüntülenen HTML'e veya HTML'den) veri sürüklemek için, HTML drag ve drop olaylarını kullanabilirsiniz. HTML sürükle ve bırak API'si sayesinde HTML içeriğindeki DOM öğelerine ve bu öğelerden veri sürükleyebilirsiniz.
Not:
Ayrıca, HTML içeriğine sahip HTMLLoader nesnesindeki olayları dinleyerek de AIR NativeDragEvent ve NativeDragManager API'lerini kullanabilirsiniz. Ancak HTML API'si HTML DOM ile daha başarılı bir şekilde entegredir ve size, varsayılan davranışın kontrolünü sağlar.
Varsayılan sürükle ve bırak davranışı
HTML ortamı metin, görüntüler ve URL'leri de içeren sürükle ve bırak hareketleri için varsayılan davranış sağlar. Varsayılan davranışı kullanarak her zaman bu tür verileri bir öğenin dışına sürükleyebilirsiniz. Ancak, bir öğeye yalnızca metin sürükleyebilirsiniz ve yalnızca sayfanın düzenlenebilir bir bölgesinde bulunan öğelere sürükleyebilirsiniz. Bir sayfanın düzenlenebilir bölgeleri arasında veya içinde metni sürüklediğinizde, varsayılan davranış bir taşıma eylemi gerçekleştirir. Düzenlenemeyen bir bölgeden veya uygulamanın dışından düzenlenebilir bölgeye metin sürüklediğinizde, varsayılan davranış bir kopyalama eylemi gerçekleştirir.
drag-and-drop olaylarını kendiniz işleyerek varsayılan davranışı geçersiz kılabilirsiniz. Varsayılan davranışı iptal etmek için, drag-and-drop olayları için gönderilen nesnelerin
preventDefault()
yöntemlerini çağırmalısınız. Seçilen eylemi gerçekleştirmek için gerekli olduğundan, verileri bırakma hedefine ekleyebilir ve sürükleme kaynağından kaldırabilirsiniz.
Varsayılan olarak kullanıcı istediği metni seçip sürükleyebilir ve görüntüleri ve bağları sürükleyebilir.
-webkit-user-select
WebKit CSS özelliğini, bir HTML öğesinin nasıl seçilebileceğini kontrol etmek için kullanabilirsiniz. Örneğin
-webkit-user-select
öğesini
none
olarak ayarlarsanız, öğe içerikleri seçilebilir olmaz ve sürüklenemez.
-webkit-user-drag
CSS özelliğini, bir öğenin bütün olarak sürüklenip sürüklenemeyeceğini kontrol etmek için de kullanabilirsiniz. Ancak öğenin içerikleri ayrı öğeler olarak kabul edilir. Kullanıcı hala metnin seçili bir kısmını sürükleyebilir. Daha fazla bilgi için bkz.
AIR’de CSS
.
HTML'de sürükleme ve bırakma olayları
Bir sürükleme işleminin kaynaklandığı başlatıcı öğe tarafından gönderilen olaylar şunlardır:
|
Olay
|
Açıklama
|
|
dragstart
|
Kullanıcı sürükleme hareketini başlattığında gönderilir. Bu olayın işleyicisi gerekirse olay nesnesinin preventDefault() yöntemini çağırarak sürüklemeyi engelleyebilir. Sürüklenen verilerin kopyalanabildiğini, verilere bağ verilebildiğini veya taşınabildiğini kontrol etmek için, effectAllowed özelliğini ayarlayın. Seçilen metin, görüntüler ve bağlantılar varsayılan davranış tarafından panoya konur, ancak olay nesnesinin dataTransfer özelliğini kullanarak sürükleme hareketi için farklı veriler ayarlayabilirsiniz.
|
|
drag
|
Sürükleme hareketi boyunca kesintisiz gönderilir.
|
|
dragend
|
Kullanıcı sürükleme hareketini bitirmek için fare düğmesini serbest bıraktığında gönderilir.
|
Sürükleme hedefi tarafından gönderilen olaylar şunlardır:
|
Olay
|
Açıklama
|
|
dragover
|
Sürükleme hareketi öğenin sınırları içerisinde kaldığı sürece kesintisiz gönderilir. Bu olayın işleyicisi dataTransfer.dropEffect özelliğini, kullanıcı fare düğmesini serbest bırakırsa bırakmanın kopyalama, taşıma veya bağ verme eylemlerinden hangisiyle sonuçlanacağını göstermek için ayarlamalıdır.
|
|
dragenter
|
Sürükleme hareketi öğenin sınırlarına girdiğinde gönderilir.
Bir dragenter olay işleyicisindeki dataTransfer nesnesinin herhangi bir özelliğini değiştirirseniz, bu değişiklikler bir sonraki dragover olayı tarafından hızla geçersiz kılınır. Diğer yandan, bir dragenter ve ilk dragover olayı arasında, farklı özellikler ayarlanmışsa imlecin yanıp sönmesine neden olabilecek kısa bir gecikme yaşanır. Birçok durumda, her iki olay için de aynı olay işleyicisini kullanabilirsiniz.
|
|
dragleave
|
Sürükleme hareketi öğenin sınırlarından çıktığında gönderilir.
|
|
drop
|
Kullanıcı verileri öğeye bıraktığında gönderilir. Sürüklenen verilere yalnızca bu olayın işleyicisinde erişilebilir.
|
Bu olaylara yanıt olarak gönderilen olay nesnesi, mouse olayına benzerdir. (
clientX
,
clientY
) ve (
screenX
,
screenY
) gibi mouse olayı özelliklerini, fare konumunu belirlemek için kullanabilirsiniz.
Bir drag olayı nesnesinin en önemli özelliği, sürüklenen verileri içeren
dataTransfer
öğesidir.
dataTransfer
nesnesi aşağıdaki özelliklere ve yöntemlere sahiptir:
|
Özellik veya Yöntem
|
Açıklama
|
|
effectAllowed
|
Sürüklemenin kaynağı tarafından izin verilen efekt. Genellikle dragstart olayının işleyicisi bu değeri ayarlar. Bkz.
HTML'de sürükleme efektleri
.
|
|
dropEffect
|
Hedef veya kullanıcı tarafından seçilen efekt.
dragover
veya
dragenter
olay işleyicisinde
dropEffect
öğesini ayarlarsanız, AIR, fare imlecini, kullanıcı fare düğmesini serbest bıraktığında oluşacak efekti gösterecek şekilde günceller.
dropEffect
kümesi izin verilen efektlerden biriyle eşleşmezse, bırakma işlemine izin verilmez ve
kullanılamaz
imleci görüntülenir. En son
dragover
veya
dragenter
olayına yanıt olarak bir
dropEffect
ayarlamadıysanız, kullanıcı standart işletim sistemi değiştirici tuşlarını kullanarak izin verilen efektler arasından seçim yapabilir.
Son efekt,
dragend
için gönderilen nesnenin
dropEffect
özelliği tarafından bildirilir. Kullanıcı fare düğmesini uygun hedefin dışında serbest bırakarak bırakma işlemini iptal ederse,
dropEffect
none
olarak ayarlanır.
|
|
türler
|
dataTransfer
nesnesinde mevcut olan her veri biçimi için MIME türü dizeleri içeren bir dizi.
|
|
getData(mimeType)
|
mimeType
parametresi tarafından belirtilen biçimdeki verileri alır.
getData()
yöntemi yalnızca
drop
olayına yanıt olarak çağrılabilir.
|
|
setData(mimeType)
|
dataTransfer
öğesine mimeType parametresi tarafından belirtilen biçimdeki verileri ekler. Her MIME türü için
setData()
öğesini çağırarak birden çok biçimde veri ekleyebilirsiniz. Varsayılan sürükleme davranışı tarafından
dataTransfer
nesnesine yerleştirilen tüm veriler temizlenir.
setData()
yöntemi yalnızca
dragstart
olayına yanıt olarak çağrılabilir.
|
|
clearData(mimeType)
|
mimeType
parametresi tarafından belirtilen biçimdeki tüm verileri temizler.
|
|
setDragImage(image, offsetX, offsetY)
|
Özel bir sürükleme görüntüsü ayarlar.
setDragImage()
yöntemi yalnızca bir dragstart olayına yanıt olarak ve bir HTML öğesi onun
-webkit-user-drag
CSS stili
element
öğesine ayarlanarak taşındığında çağrılabilir.
image
parametresi bir JavaScript öğesi veya Image nesnesi olabilir.
|
HTML sürükle ve bırak için MIME türleri
Bir HTML drag-and-drop olayının
dataTransfer
nesnesiyle kullanılacak MIME türleri şunlardır:
|
Veri biçimi
|
MIME türü
|
|
Metin
|
"text/plain"
|
|
HTML
|
"text/html"
|
|
URL
|
"text/uri-list"
|
|
Nokta Esaslı
|
"image/x-vnd.adobe.air.bitmap"
|
|
Dosya listesi
|
"application/x-vnd.adobe.air.file-list"
|
Uygulama tanımlı dizeler de dahil olmak üzere diğer MIME dizelerini de kullanabilirsiniz. Ancak diğer uygulamalar aktarılan verileri tanımayabilir veya kullanmayabilir.
dataTransfer
nesnesine beklenen biçimde veriler eklemek sizin sorumluluğunuzdadır.
Önemli:
Yalnızca uygulama sanal alanında kod çalıştırma, bırakılan dosyalara erişebilir. Uygulama dışı sanal alanda bir File nesnesinin herhangi bir özelliğini okuma veya ayarlama girişiminde bulunmak bir güvenlik hatasına neden olur. Daha fazla bilgi için bkz.
Uygulama dışı HTML sanal alanlarındaki dosya bırakmaları işleme
.
HTML'de sürükleme efektleri
Sürükleme hareketinin başlatıcısı,
dragstart
olayının işleyicisindeki
dataTransfer.effectAllowed
özelliğini ayarlayarak izin verilen sürükleme efektlerini sınırlandırabilir. Aşağıdaki dize değerleri kullanılabilir:
|
Dize değeri
|
Açıklama
|
|
"none"
|
Hiçbir sürükleme hareketine izin verilmez.
|
|
"copy"
|
Orijinali yerinde kalarak veriler hedefe kopyalanır.
|
|
"link"
|
Orijinaline giden bir bağ kullanılarak veriler bırakma hedefiyle paylaşılır.
|
|
"move”
|
Veriler hedefe kopyalanır ve orijinal konumundan kaldırılır.
|
|
"copyLink"
|
Veriler kopyalanabilir veya verilere bağ verilebilir.
|
|
"copyMove"
|
Veriler kopyalanabilir veya taşınabilir.
|
|
"linkMove"
|
Verilere bağ verilebilir veya veriler taşınabilir.
|
|
"all"
|
Veriler kopyalanabilir, taşınabilir veya verilere bağ verilebilir.
Tümü
, varsayılan davranışı engellediğinizde oluşan varsayılan efekttir.
|
Sürükleme hareketinin hedefi, kullanıcı bırakmayı tamamlarsa gerçekleştirilen eylemi göstermek için
dataTransfer.dropEffect
özelliğini ayarlayabilir. Bırakma efekti izin verilen efektlerden biriyse, sistem uygun kopyala, taşı veya bağ ver imlecini görüntüler. Değilse, sistem
kullanılamaz
imlecini görüntüler. Hedef tarafından bırakma efekti ayarlanmamışsa, kullanıcı değiştirici tuşlarını kullanarak izin verilen eylemler arasından seçim yapılabilir.
Hem
dragover
hem de
dragenter
olaylarının işleyicilerindeki
dropEffect
değerini ayarlayın:
function doDragStart(event) {
event.dataTransfer.setData("text/plain","Text to drag");
event.dataTransfer.effectAllowed = "copyMove";
}
function doDragOver(event) {
event.dataTransfer.dropEffect = "copy";
}
function doDragEnter(event) {
event.dataTransfer.dropEffect = "copy";
}
Not:
dragenter
için işleyicideki
dropEffect
özelliğini her zaman ayarlamanız gerekse de, sonraki
dragover
olayının özelliği varsayılan değere sıfırladığını unutmayın. Her iki olaya yanıt olarak da
dropEffect
öğesini ayarlayın.
|
|
|
