zone bunu yazdı çok araştırma yapan birisin takdiri şayan :) HTML5'i grünce acayip merak sardım. @by_Tet IE deme bana kullanmıyorum. :) I HATE IE. Ben sana demedim hocam :) if iyibu! yeniden..

çok araştırma yapan birisin takdiri şayan :)

Merhaba arkadaşlar, Daha nce açmış olduğum konuyu biraz daha genişleterek size "ğrendiğim" kadarıyla HTML5 Drag & Drop ve birkaç rneğini gstereceğim. nce yeni Listener'larımızı tanıyalım. dragstart dragenter dragover dragleave dragend drop dragstart : Drag olayı başladığı anki olayımızdır. bir nesneyi tuttuğumuz zaman "Nesne Tutuldu." uyarısı vermek istiyorsak bu listener'ı kullanabiliriz. dragenter : Dragzone'a nesne giriş yaptığı zamanki olayımızdır. Bir nesne dragable="true" değeri ile tutulabilir yapılır. Bir nesneyi dragable="true" olan alana sürüklersek bu olay gerçekleşir. dragover : Bu olay dragenter'a benzer arasındaki fark ise dragenter nesne giriş yaptığı zaman 1 kere çalışırken dragover nesne üzerinde bulunduğu sürece işler. dragleave : Dragzone'dan nesne çıkış yaptığı zaman işler. dragend : Mouse ile tuttuğumuz nesneyi bıraktığımız zaman işler. Nesnenin bırakılması olayıdır. drop : Nesneyi dropzone'a koyduğumuz zaman işler. Drag & Drop olayı tamamlanmış olur. Not : dragenter, dragover, dragleave olayları istenirse dropzone için de kullanılabilir. Şimdi gelelim listener'larımızı nesnelerimize eklemeye. var drags = document. querySelectorAll ; . forEach. call(drags, function ); Yukarıdaki rneğimizde class="dragable" olan nesnelerimizi alıp dragstart, dragenter, dragover, dragleave, dragend olaylarını ekledik. İstersek tek bir nesneyede ekleyebilir. var dragr = document. getElementById('drag1'); dragr. addEventListener ; Yukarıda ise id="drag1" olan bir nesneye dragstart olayını ekledik. Olaylar eklenir de silinmez mi?O da var silmek içinse aşağıdaki kodumuza bakalım... var dragr = document. getElementById('drag1'); dragr. removeEventListener ; dragr. removeEventListener ; dragr. removeEventListener ; dragr. removeEventListener ; dragr. removeEventListener ; removeEvetListener ile olaylarımızı silmiş olduk. Şimdi ise dropzone'umuzu ayarlayalım. var drop = document. getElementById ; drop. addEventListener ; . forEach(function { drop. addEventListener(item, function , false); }); Yukarıdaki kodumuz ile id="box-list" olan dropzone'a dragenter ve dragover olayları sırasında drop olma zelliğini kattık. Not : handleDragStart, handleDragEnter, handleDragOver, handleDragLeave, handleDragEnd, handleDrop bunları herbiri kendi yazacağımız fonksiyonlardır. Aşağıda rnek fonksiyonları greceksiniz. function handleDragStart e. dataTransfer. setData ; //Drag olayımız başladı ve ben tuttuğum nesnein ID'sini "Text" değerine atadım. this. classList. add ; //Tuttuğum nesneye dragon class'ı ekledim. ) Burda bir şey daha ğreneceğiz o da nesneyi tuttuğumuz icon şeklinde resim eklemeyi. var dragIcon = document. createElement ; //image nesnemizi oluşturdukdragIcon. src = 'images/ark2. png'; //adresimizi atadık. dragIcon. width = 128; //genişliğini ayarladık. e. dataTransfer. setDragImage(dragIcon, -20, -10); //mouseun biraz yanına yerleştirdik. function handleDragEnter Bu kodumuz ile nesnenin bulunduğu alana girdiğimizde nesnemize over class'ı atadık. function handleDragOver Dragover olayımızı da yaptık. e. dataTransfer. dropEffect = 'move'; // henüz bunun tam olarak ne işe yaradığını kavrayabilmiş değilim. :) function handleDragLeave DragLeave ile nesnenin bulunduğu yerden çıktığımız için over class'ını sildirdik. function handleDragEnd { console. log ; e. preventDefault ; var drags = document. querySelectorAll ; . forEach. call(drags, function ); } Drag olayımız bittiğinde class="dragable" olan tüm nesnelerimizin over ve dragon classlarını sildiriyoruz. function handleDrop { console. log ; if var veriID = e. dataTransfer. getData ; var nesne = document. getElementById ; //alert(document. getElementById . className); if { if(nesne. className. indexOf >= 0) } e. preventDefault ; } Drop olayımızda ise "Text" değerine atadığımız ID'mizi çekiyoruz ve sendData fonksiyonumuz ile gerekli işlemleri yapıyoruz. Ben ID'yi alıp ajax ile işlemler yaptım. Bundan sonrası sizlere kalmış. :) function sendData { $. ajax({ url: 'index.html?box=add&ID='+data, success: function { if } }); return true; } sendData fonksiyonunu da vereyim aklınız kalmasın. :)$ .html . attr . after ; //burada gelen veriyi new-list ID'li div'e yazdırdım ve ID'sini değiştirdim. Div'den hemen sonra yeni bir new-list ID'li bir div ekledim.$ . removeClass . addClass . parent . addClass ; //burada ise nesnemin dragable zelliğini sildim. "soluk" class'ını ekledim ve içersinde bulunduğu yere de "soluk" class'ı ekledim. removeDragDrop ; //yukarıda da bahsetmiştim listener'ları silmek için bu fonksiyonu kullandım ve tamamen drag zelliği kalktı. Yukarda kullandığım fonksiyonları denemek için http://pskpt.net. tc/ adresindeki indirme kutusunu deneyebilirsiniz. Drag & Drop Çoklu Dosya Yükleme. var dropArea = document. getElementById ; var count = document. getElementById ; var result = document. getElementById ; var pbar = document. getElementById ; var list = ; var totalSize = 0; var totalProgress = 0; değişkenlerimizi tanıttık. function initHandlers Drop, Dragover, Dragleave olaylarımızı ekledik. function drawProgress Progressbar'ımızı güncellemek için. function handleDragOver Dosyamızı dropzone'umuza getirdik ve dropArea'mızın class'ı "hover" olarak değişti. İçeriğine "Bırak Şimdi!" yazdırdık. function handleDragLeave Dosyamız dropzone'muzdan dışarı çıkarsa "over" class'ımızı sildirdik ve içeriğine "Gitme Gel!" yazdırdık. function handleDrop Dosyamızı bıraktık ve bırakılan dosyalarımızı processFiles fonksiyonu ile gnderdik. Buraya kadar Drag & Drop olayımızı yaptık. Not: evenstopPropagation ; sürüklenen dosyanın browser tarafından çalıştırılmasını nlemek içindir. Şimdi ise sıra AJAX ile dosyamızı yüklemek ve progessbar'ımızı kontrol etmekte. function processFiles { if return; totalSize = 0; totalProgress = 0; result. textContent = ''; for (var i = 0; i < filelist. length && i < 10; i++) uploadNext ; } Yukarıdaki fonksiyonda filelist'imizi kontrol ediyoruz. Dosyalarımızı saydırık toplam boyutlarını aldık ve her bir dosyayı "list" arrayına atadık. function uploadNext { if { count. textContent = list. length - 1; dropArea. className = 'uploading'; var nextFile = list. shift ; if (nextFile. size >= 602000) else } else } upload etmeden nce son kontrolleri yapıyoruz. Dosya boyutunu kontrol ediyoruz. var nextFile = list. shift ; // list. shift ile array'in ilk elemanını siliyoruz. upload fonksiyonunu ben birazcık değiştirdim hata kodları JSON vs. PHP dosyasını da paylaşacağım Javascript ile formData oluşturuyoruz buna dosyamızı tanıtıyoruz ve ardından AJAX ile post ediyoruz. function handleComplete dosya yüklenmesi tamamlandıktan sonra progressbar'ımızı güncelliyoruz. function handleProgress Bu da progressbar'ın güncellenmesi. Bu yazımda asıl nemli olan Drop olayındaki event. dataTransfer. files kısmıdır. :)Denemek için : http://pskpt.net. tc/upload/ İndirmek için : http://pskpt.net. tc/upload/upload. rar Gelecek yazıma buradan devam edeceğim. Drag & Drop ile yapılmış Captcha. pSkpt tarafından 09/Ağu/12 00:06 tarihinde düzenlenmiştir İmza...

Makale ikinci mesajda çünkü yazmaya devam edeceğim... İmza...

müsait bi zamanda inceleyeyim "açık mı var la" yazdı diye ban yiyen adam!

şurayı alayım ben: soru sorarsam geri dnüş yaparsınız inş. Living Death

on numarasın hocam, e. dataTransfer. dropEffect = 'move'; satırı sanırım bıraktığın zaman haşırt diye bırakmasını sağlıyo. yada başka anlatımı varda uyuyom şimdi kendime bi geliyim. Hea bide DragOn yaz hocam ejderhanın html5le ne ilişkisi var diye oturdum 5 dakka baktım ekrana :D Çok sıkılıyom

çok araştırma yapan birisin takdiri şayan :) HTML5'i grünce acayip merak sardım. @by_Tet IE deme bana kullanmıyorum. :) I HATE IE. İmza...

şurayı alayım ben: soru sorarsam geri dnüş yaparsınız inş. Yardımcı oluruz tabi. :)Bu arada Drag & Drop Resim Upload da ekledim. :) İmza...

on numarasın hocam, e. dataTransfer. dropEffect = 'move'; satırı sanırım bıraktığın zaman haşırt diye bırakmasını sağlıyo. yada başka anlatımı varda uyuyom şimdi kendime bi geliyim. Hea bide DragOn yaz hocam ejderhanın html5le ne ilişkisi var diye oturdum 5 dakka baktım ekrana :D Bırakırken imlecin nasıl olacağını belirliyormuş. :)http://help.dottoro.com/external/examples/ljffjemc/dropEffect_1.htmDragon benim fonksiyonum ya HTML5'in değil. :D halbuki yanına açıklama da yapmıştım Drag-On diye :) İmza...

Aaaah ahhh her html5 konusunda ciğerim parçalanır içim gider nezaman internet explorer'dan vazgeçecek bu millet :( iyibu! yeniden..