[Döküman] HTML5 Drag & Drop

Tahribat.com Forumları
line

Html - CSS - XML - JavaScript - Ajax
line

[Döküman] HTML5 Drag & Drop

06/Ağu/12 19:00 Kısayol Şikayet Özel Mesaj
pSkpt

Kayıt Tarihi: 10/Aralık/2010
Merhaba arkadaşlar,

HTML5 içersinde bir çok özelliği bizlere sunuyor.

Drag & Drop (Sürükle & Bırak) olayını normalde Javascript ile yapabilmekteyiz.

Fakat HTML5'in kendi özelliği ile de basit bir şekilde yapabiliriz.

Kendi yaptığım örneği pskpt.net.tc adresinde görebilirsiniz.
```
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));

/*$.ajax({
  url: 'index.html?box=add&ID='+data,
  success: function(gelVeri) {
  if (gelVeri != 'false'){
    $('#new-list').html(gelVeri).attr('id','').after('<div id="new-list" class="box-text"></div>');
    $('#'+data).addClass('soluk');
    }
  }
});*/
}
```
```
<img src="http://tahribat.com/css/Themes/Default/navbar_orjinal.jpg" id="Tahribat" draggable="true" ondragstart="drag(event)" />

<div class="dand" ondrop="drop(event)" ondragover="allowDrop(event)">Buraya Bırak<br /></div>
```
Yukarıdaki örneği açıklamak gerekirse,

Öncelikle bir öğenin taşınabilir olması için draggable="true" değeri kesinlikle yerleştirilmeli.

Ve sürüklenecek olan kısımda bırakılması için izin verilmeli bunu da allowDrop(event) fonksiyonu ile yapıyoruz.

Ardından sürükleyeceğimiz öğenin sürüklemeye başlaması sırasında drag olayı başlıyor : ondragstart="drag(event)"
```
ev.dataTransfer.setData("Text",ev.target.id);
```
Bu kısımda tuttuğumuz öğenin id değerini "Text" adlı bir değişkene atıyoruz.
```
var data=ev.dataTransfer.getData("Text");
```
Bu kısımda ise "Text" adlı değişkeni çekip data değişkenine atıyoruz.
```
ev.target.appendChild(document.getElementById(data));
```
Bu kısımda ise üzerinde bulunduğumuz yere tuttuğumuz nesneyi ekliyoruz.

Ben bu kısmı kullanmadım yukarda kapattığım JQuery Ajax fonksiyonunu kullandım ve sadece taşıdığım değerin ID'sini aldım.

Bu da yukarıda yaptığım örnek:

http://jsbin.com/avewim/1/

HTML5 ve Drag&Drop Örneklerinin Bulunduğu Siteler:

http://html5demos.com/

http://html5demos.com/drag

http://www.w3schools.com/html5/html5_draganddrop.asp

http://dev.opera.com/articles/view/drag-and-drop/ (Ayrıntıları burada bulabilirsiniz.)

İmza...
Alıntı yap
07/Ağu/12 00:02 Kısayol Şikayet Özel Mesaj

moi

Kayıt Tarihi: 26/Mayıs/2009

bu olay, hangi amaçlarda kullanılabilir?

Sadece paranoyaklar hayatta kalır...

Alıntı yap
07/Ağu/12 00:13 Kısayol Şikayet Özel Mesaj

sezeruludag

Kayıt Tarihi: 22/Ağustos/2011

yaptığın sitenin panelinde sıralama için olabilir veya arkadaşın yaptığı gibi sepeti olan veya benzer sistemi olan işlemler için sürükle bırakla doldurulabilir :) güzelmiş klavyene sağlık

Hatasız Kod Olmaz... :)

Alıntı yap
07/Ağu/12 00:45 Kısayol Şikayet Özel Mesaj

moi

Kayıt Tarihi: 26/Mayıs/2009

captcha yöntemi olarak kullanilabilir mi? 3 tane kutu olsa birine sürüklediğinde onaylasa mesela?

Sadece paranoyaklar hayatta kalır...

Alıntı yap
07/Ağu/12 00:51 Kısayol Şikayet Özel Mesaj

pSkpt

Kayıt Tarihi: 10/Aralık/2010

LasTMohicaN bunu yazdı

captcha yöntemi olarak kullanilabilir mi? 3 tane kutu olsa birine sürüklediğinde onaylasa mesela?

Kullanılabilir evet.
Üc resim olur.
1 tanesinin id'si evet olur diğerleri hayır olur. Eğer dönüt evet ise onaylanır.

İmza...

Alıntı yap
07/Ağu/12 01:52 Kısayol Şikayet Özel Mesaj

asiminnesli

Kayıt Tarihi: 19/Mart/2010

edit: çok hoş olmuş ellerine sağlık

class tabanlı kodlama çok zor geliyor bana bunu daha rahat anlayabileceğim bir yolu varmı ?

bahsettiğim şey asp de c++ da actionscript te javascript dillerininin genel syntex i oluyor
asiminnesli tarafından 07/Ağu/12 01:53 tarihinde düzenlenmiştir

I am Jack's inflamed sense of rejection

Alıntı yap
07/Ağu/12 01:57 Kısayol Şikayet Özel Mesaj

pSkpt

Kayıt Tarihi: 10/Aralık/2010

LasTMohicaN bunu yazdı

captcha yöntemi olarak kullanilabilir mi? 3 tane kutu olsa birine sürüklediğinde onaylasa mesela?

http://pskpt.net.tc/captcha/captcha.php

İndirmek için : http://pskpt.net.tc/captcha/captcha.rar

İmza...

Alıntı yap
07/Ağu/12 01:58 Kısayol Şikayet Özel Mesaj

LostDream

Kayıt Tarihi: 28/Mart/2007

uzun zamandır böyle bir şey düşünüyordum. ziyaretçinin profil resmi upload edebilmesi için. yarın bakmak üzere çizik.

Alıntı yap
07/Ağu/12 01:58 Kısayol Şikayet Özel Mesaj

pSkpt

Kayıt Tarihi: 10/Aralık/2010

asiminnesli bunu yazdı

edit: çok hoş olmuş ellerine sağlık

class tabanlı kodlama çok zor geliyor bana bunu daha rahat anlayabileceğim bir yolu varmı ?

bahsettiğim şey asp de c++ da actionscript te javascript dillerininin genel syntex i oluyor

class tabanlı kodlama derken?

İmza...

Alıntı yap
07/Ağu/12 23:24 Kısayol Şikayet Özel Mesaj

moi

Kayıt Tarihi: 26/Mayıs/2009

pSkpt bunu yazdı
LasTMohicaN bunu yazdı

captcha yöntemi olarak kullanilabilir mi? 3 tane kutu olsa birine sürüklediğinde onaylasa mesela?

http://pskpt.net.tc/captcha/captcha.php

İndirmek için : http://pskpt.net.tc/captcha/captcha.rar

Harikasin hocam klavyene saglik :)

Sadece paranoyaklar hayatta kalır...

Alıntı yap
07/Ağu/12 23:38 Kısayol Şikayet Özel Mesaj

Retro
by_Tet

Kayıt Tarihi: 22/Mayıs/2012

Helalsin :)

Bu html5 bulunmaz bir nimet ama tarayıcı problemleri var işte. Tarayıcı problemleri aşıldığı html5 aktif hale geldiği zaman internet öyle böyle gelişmeyecek demedi demeyin.

iyibu! yeniden..

Alıntı yap

Toplam Hit: 3063 Toplam Mesaj: 18

Cevapla