Dragula ile kolayca web sitesine Sürükle ve Bırak ekle

Ücretsiz bir kütüphane mi arıyorsunuz? sürükle ve bırak özellikleri? Sonra Dragula ihtiyacınız olan tek kaynak.

Bu ücretsiz script size izin veriyor sayfanızdaki herhangi bir öğe için sürükle ve bırak özellikleri ekleyin. Bu, vanilya JavaScript ile birlikte React & AngularJS çerçeveleri için destek içerir.

Dragula kurmak süper kolay ve birlikte geliyor kullanıcı davranışları için bir sürü özel tetikleyici. Bu, kullanıcı bir öğeyi sürükleyip, bir öğeyi tıklattıktan veya sayfanın herhangi bir bölümünü yeniden düzenledikten sonra kendi işlevlerinizi tetikleyebileceğiniz anlamına gelir.

Canlı demoda bir göz atarsanız, birkaç kod parçacığı, ile birlikte kullanılabilir örnekler.

Dragula kurulumu sadece tek bir JavaScript dosyası gerektirir çalışmak için. Bununla birlikte, ekstra seçenekler biraz kafa karıştırıcı olabilir.

Örneğin, iki kabınız olduğunu varsayalım., #ayrıldı ve #sağ, Sürüklenebilir öğeleri desteklemek istediğiniz İhtiyacınız olacak bu kapları Dragula işlevine el ile ekleyin sürükle ve bırak yöntemlerini desteklemek için.

Ön uç gelişimin temellerini sağlam bir kavrayışınız yoksa Dragula'yı kullanmakta zorlanacaksınız. Ancak GitHub deposunda bol miktarda bulunur. birlikte izleyebileceğiniz harika örnekler ve hatta kopyalayabileceğiniz kod parçacıkları.

GitHub belgelerinde nasıl yapılacağına ilişkin bir örnek iki (sol ve sağ) kabı hedefleyin:

 dragula ([document.querySelector ('# sol'), document.querySelector ('# sağ')]);

GitHub sayfasında daha fazla bakarsanız bulacağınızı unutmayın. çok sayıda seçenek listesi bu işleve geçebilirsin.

Seçebilirsiniz öğeleri kopyalamak veya taşımak için, hangi konteynerleri sürüklenen öğeleri destekliyor ve hatta geri arama işlevleri Bu gibi farklı kullanıcı davranışları ile çalışır:

Bir konteyner üzerinde gezinip
İlk tıklama ve sürükle etkinliği
Etkinlik bırak
Bir öğeyi sınır dışına çıkarma
Bir öğeyi / kabı sürükleyerek klonlama

Bu kütüphane başlangıçta işe yarayacak Fakat eğer JavaScript'i iyi biliyorsan, zihniyetsiz olmalısın.

İçin demo sayfasını inceleyin Nasıl çalıştığını gör ve için birkaç kod örneği fikri edinin. Dragula büyük bir kütüphanedir ve muhtemelen en iyi açık kaynak kodlu komut dosyasıdır. En geniş kişiselleştirme yelpazesine sahip sürükle ve bırak işlemlerini gerçekleştirin.