HTML'de sürükle ve bırak

Adobe AIR 1.0 ve üstü

Varsayılan sürükle ve bırak davranışı
HTML'de sürükleme ve bırakma olayları
HTML sürükle ve bırak için MIME türleri
HTML'de sürükleme efektleri

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, `dropEffectnone` 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.