Sürükle ve bırak HTML5 standardının bir parçasıdır.
sürükleme (event) "id =" drag1" alt = "w3ii"> Drag w3ii dikdörtgen içine görüntüyü.
Sürükle ve bırak
Sürükle ve bırak çok yaygın bir özelliktir. Eğer zaman olduğu "grab" bir nesneyi ve farklı bir konuma sürükleyin.
HTML5'de sürükle ve bırak standart bir parçası olan ve herhangi bir elemanın sürüklenebilir.
Tarayıcı Desteği
Tablodaki rakamlar tam Sürükle ve Bırak destekleyen ilk tarayıcı sürümü belirtin.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6 | 12.0 |
HTML Sürükle ve Bırak Örneği
Aşağıdaki örnek, basit bir sürükle ve bırak örnektir:
Örnek
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> Kendin dene " Karmaşık gibi görünebilir ama bir sürükle ve bırak olayı tüm farklı bölgelerinde geçmesi sağlar olabilir.
Bir Eleman sürüklenebilir yapın
Her şeyden önce: Bir öğe sürüklenebilir hale getirmek için, set draggable için niteliğini true :
<img draggable="true">Ondragstart ve - Ne Drag için setData()
Ardından, öğe sürüklendiğinde ne olacağını belirtin.
Yukarıdaki örnekte, ondragstart nitelik bir işlev çağrıları drag(event) , söz konusu veriler sürüklenen ne belirtir.
dataTransfer. setData() dataTransfer. setData() metodu veri tipi ve sürüklenen verilere değerini belirler:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
Bu durumda, veri türüdür "text" ve değer sürüklenebilir elemanın id ("drag1") .
Nerede Bırak için - ondragover
ondragover sürükledi veriler bırakılabilir nerede olay belirtir.
Varsayılan olarak veri / elemanlar diğer elemanların düştü edilemez. Bir damla olanak tanımak için, elemanın varsayılan işlenmesini önlemek gerekir.
Bu arayarak yapılır event. preventDefault() event. preventDefault() yöntemi ondragover durumunda:
event . preventDefault()
Drop Do - ondrop
sürüklenen veriler kesildiğinde, bir damla olayı oluşur.
Yukarıdaki örnekte, ondrop özelliği, bir fonksiyonu çağıran drop(event) :
function drop(ev)
{
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Kod açıkladı:
- Çağrı preventDefault() veri tarayıcı varsayılan işlenmesini önlemek için (default is open as link on drop)
- Ile sürüklenen verileri alın dataTransfer. getData() dataTransfer. getData() metodu. Aynı tip ayarlanmış herhangi bir veri dönecektir Bu yöntem setData() metodu
- Sürüklenen veri sürüklenen elemanın id ("drag1")
- Sürüklenen eleman Append drop elemanı
Diğer Örnekler
Ileri geri sürükleme görüntüsü
Nasıl sürüklemek için (and drop) bir görüntü ve geriye ikisi arasında <div> elemanlarının.