Sahada süper kahramanları sürükleyin

Bu görev, Drag’n’Drop (sürükle bırak) ve DOM’un çeşitli yönlerini anlamanıza yardımcı olacaktır.

Tüm öğeleri draggable sınıfıyla – sürüklenebilir yapın. Bölümdeki top gibi.

Gereksinimler:

Sürükleme başlangıcını izlemek için olay delegasyonunu kullanın: mousedown için document" üzerinde tek bir olay dinleyicisi yeterli.
Öğeler pencerenin üst / alt kenarlarına sürüklenirse – daha fazla sürüklemeye izin vermek için sayfa yukarı / aşağı kayar.
Yatay kaydırma yok.
Sürüklenebilir öğeler, hızlı fare hareketlerinden sonra bile tarayıcıdan/pencereden asla ayrılmamalıdır.

Demo buraya sığamayacak kadar büyük, link burada.

Öğeyi sürüklemek için position:fixed kullanabiliriz, koordinatların yönetilmesini kolaylaştırır. Ancak sonunda onu tekrar eski konumuna getirmeliyiz: position:absolute.

Ardından, koordinatlar pencerenin üstünde / altında olduğunda, kaydırmak için window.scrollTo kullanırız.

Kodun içindeki yorumlarda daha fazla ayrıntı bulabilirsiniz.

Çözümü korunaklı alanda aç.