Sürüklenebilir Öğe Oluşturma

Panel, palet, araç çubuğu, denetleyici veya iletişim kutusu gibi mevcut bir kayan öğeye sürükleme özelliği ekleyin. Sürükleme işlemi, öğenin nasıl görüntüleneceğini, kapatılacağını, yığınlanacağını veya odaklanacağını belirlemez.

Özel bir herkese açık kullanıcı adı kullanma

Öğe seçilebilir metin, düğme, giriş veya bağlantı içeriyorsa özel bir tutma yerinden sürüklemeye başlayın. Bu sayede normal içerikleri kullanılabilir durumda kalır. Tutma yerini klavye hareketi için odaklanılabilir hale getirin ve ok tuşu etkileşiminden bahseden erişilebilir özellikli bir ad verin.

Tutma yerine role="application" uygulamayın. Yardımcı teknoloji etkileşimini gereksiz yere değiştirir.

cursor: grab/grabbing, touch-action: none ve hem user-select: none hem de -webkit-user-select: none özelliklerini sürüklenebilir öğenin tamamına değil, tutma yerine uygulayın. Böylece, tutma yerinin dışındaki metin seçilebilir durumda kalır ve dokunma hareketleri normal şekilde çalışır:

.drag-handle {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.drag-handle.dragging {
  cursor: grabbing;
}

İşaretçi konumunu ve erişilebilirliğini koruma

Hareketi görüntü alanıyla sınırlarken position: fixed gibi görüntü alanına göre konumlandırma modeli kullanın.

• Yalnızca birincil işaretçi düğmesi (event.button === 0) için sürükleme işlemi başlatın.
• pointerdown üzerinde işaretçi ofsetini kaydedin ve her harekette kullanın. Böylece öğe, köşesinden tutulduğunda atlamaz.
• İşaretçi, tutma yerinden ayrıldıktan sonra sürükleme işlemini etkin tutun. setPointerCapture() varsayılan değerine ayarlayın ve lostpointercapture üzerindeki sürükleme durumunu temizleyin. Tutma yeri sürükleme sırasında kaldırılabilir veya yeniden oluşturulabilirse yakalama işlemi kaybolacağından bunun yerine belge düzeyinde pointermove, pointerup ve pointercancel dinleyicileri kullanın.
• İsteğe bağlı olarak, sürükleme durumuna girmeden önce yaklaşık 4 piksellik bir hareket bekleyin. Böylece, tutma yerine tıklandığında sürükleme stili tetiklenmez.

İşaretçi yakalama özelliği sayesinde hareket dinleyiciler tutma yerinde kalabilir:

handle.addEventListener('pointerdown', (event) => {
  if (event.button !== 0 || event.target.closest('button, input, select, textarea, a')) return;

  const rect = draggable.getBoundingClientRect();
  offsetX = event.clientX - rect.left;
  offsetY = event.clientY - rect.top;
  handle.setPointerCapture(event.pointerId);
});

handle.addEventListener('pointermove', (event) => {
  if (!handle.hasPointerCapture(event.pointerId)) return;
  handle.classList.add('dragging');
  moveTo(event.clientX - offsetX, event.clientY - offsetY);
});

handle.addEventListener('lostpointercapture', () => {
  handle.classList.remove('dragging');
});

function moveTo(left, top) {
  const maxLeft = Math.max(0, window.innerWidth - draggable.offsetWidth);
  const maxTop = Math.max(0, window.innerHeight - draggable.offsetHeight);

  draggable.style.left = `${Math.max(0, Math.min(left, maxLeft))}px`;
  draggable.style.top = `${Math.max(0, Math.min(top, maxTop))}px`;
}

Öğenin erişilebilir kalması için her işaretçi ve klavye konumunu aynı yardımcı aracılığıyla sabitleyin. Görüntü alanı veya öğe boyutu değişikliklerinden sonra mevcut konumunu yeniden sabitleyin. Düzen ağırlıklı öğeler için, kare başına düzeni önlemek amacıyla sürükleme sırasında çeviri yapmayı, ardından son konumu serbest bırakıldığında left ve top olarak ayarlamayı düşünün.

Klavye ile hareket etme imkanı sunma

Tutma yeri odaklandığında öğeyi ok tuşlarıyla taşıyın ve bu tuşlar için preventDefault() tuşuna basın. İşaretçi hareketiyle aynı sınırlı konumlandırma yardımcısını kullanın. 15 piksellik bir artış makul bir başlangıç noktasıdır. Bunu bileşenin boyutuna ve hassasiyet ihtiyaçlarına göre uyarlayın.

İletişim kutusuna özel not

<dialog> veya [popover], bu mekanizmayı başlığıyla birlikte tutma yeri olarak kullanabilir. Tarayıcının varsayılan kenar boşlukları manuel konumlandırmayı engellediğinden left ve top değerlerini atamadan önce margin: 0 değerini ayarlayın. İletişim kutusu ve popover açma, kapatma, odaklama ve kapatma davranışı için Bildirimli İletişim Kutusu ve Popover Kontrolü ve Platform Kontrolleri İletişim Kutusunu Kapatma bölümlerine bakın.

Yedek stratejiler

Sürükleme işlemi yalnızca bir bileşenin konumunu değiştiriyorsa bunu progresif geliştirme olarak değerlendirin: JavaScript olmadan öğeyi, içeriğini ve kontrollerini görünür, okunabilir ve işlevsel bir varsayılan konumda tutun. İşlevsel olmayan bir sürükleme tutma yeri göstermeyin: Tutma yeri bağımsız bir tutma kontrolüyse varsayılan olarak gizleyin ve JavaScript başlatıldığında gösterin. Bir başlık, tutma yeri olarak da kullanılıyorsa JavaScript başlatıldığında sürükleme olanaklarını ekleyin.

Safari'de sürükleme sırasında metin seçiminin engellenmesi için user-select: none öğesinden önce -webkit-user-select: none öğesini ekleyin.