Makaleyi arkadaşlarınızla paylaşarak sitenin geliştirilmesine yardımcı olun!

js sürükle ve bırak uygulamasına giriş

Node.js, verileri bir konumdan başka bir konuma aktardığımız, yani sürükle ve bırak anlamına gelen sürükle ve bırak özelliği gibi kullanıcıya farklı seçeneklere sahip bir Vue.js işlevi sunar. Kullanıcının verilerini işlemesi için etkileşimli bir yol sağlar. Projenize sürükle ve bırak işlevi eklediğimizde, uygulamayı doğal ve kullanıcı dostu hale getirmenin harika bir yolu. Sürükle, sürükle başlat, sürükle bırak, sürükle, sürükle bırak, sürükle ve bırak, vb. gibi sürükle ve bırak işlevlerini uygulamak için kullanıcılara farklı API türleri sağlar.Sürükle ve bırak uygulamak için bir dataTransfer nesnesine ihtiyacımız vardı.

Sözdizimi

1. Sürükle

startDrag: (etkinlik , ürün)
{
event.dataTransfer.dropEffect="hareket"
event.dataTransfer.effectAllowed="hareket"
event.dataTransfer.setData('productID', product.id)
}

Açıklama

Yukarıdaki sürükleme sözdiziminde, ürünün kimliğini saklamamız gerekiyor ve dataTransfer işlevini kullanarak sürükleme yapıyoruz ve burada ayrıca sürükleme olayının taşınacağını belirtiyoruz.

2. Bırak

onDrop (etkinlik, ürün)
{
Const product_ID=event.dataTransfer.getData('productID')
Const product=this.product.find(product=product.id==productID)
ürün.liste=liste
}

Açıklama

Yukarıdaki sözdiziminde, doğru şekilde erişebilmemiz için depolanan ürün kimliğini alırız.

Vue.js'de sürükle ve bırak nasıl çalışır?

  1. Sisteminize Node.js 10.x ve üstünü yüklemeliyiz ve terminalinizde node -v komutunu kullanarak doğrulama yapabilirsiniz.
  2. npm i -g @vue/cli komutunu kullanarak Vue'nin en son sürümünü sisteminize yüklemeliyiz.
  3. Ardından proje adı oluşturmak için vue kullanarak projeyi oluşturun.
  4. Npm i -S vuedraggable kullanarak projenize sürüklenebilir paketleri kurmalıyız.
  5. Node.js hakkında temel bilgilere ihtiyacımız vardı.
  6. Vue.js ve bileşenleri hakkında temel bilgilere ihtiyacımız vardı.
  7. Vue.js sürükle bırak yardımı ile farklı işlemler gerçekleştiriyoruz.

Açıklama yapmadan önce Sürükle Bırak Olayını aşağıdaki gibi bilmeliyiz.

Vue.js, API'de toplam sekiz tür sürükle ve bırak olayı sağlar ve bunları uygulamamızda uygulayabiliriz.

  • Drag: Öğeyi sürüklemek için sürükleme olayı kullanılır.
  • dragstart: Dragstart olayı, sürüklenebilir bir öğeyi sürüklemeye başlamak için kullanılır.
  • dragend: Dragend olayı, sürükleme uçlarını göstermek için kullanılır.
  • dragenter: Sürüklenen bir öğe bırakılabilir bir bölgeye girildiğinde dragenter olayı kullanılır.
  • dragleave: Sürüklenen bir öğeden ayrıldığımızda dragleave olayı kullanılır.
  • dragover: Sürüklenen bir öğe taşındığında kullandığımız dragover olayı.
  • drop: Sürüklenen öğeyi bıraktığımızda drop olayı kullanılır.
  • dataTransfer Nesnesi: DataTransfer nesnesi, sürükle ve bırak API'sindeki en kullanışlı nesnedir. Bu nesne, bir öğeyi sürüklemeye başlama ve damlaya bıraktığımızda bu öğelere erişme izni verir

VeriTransfer Nesnesinin Özellikleri

  • dropEffect: Bu dropEffect, devam eden sürükle ve bırak işlemini göstermek için kullanılır.
  • effectAllowed: Bu ayrıca sürükle ve bırak işlemini de gösterir.
  • setData: Bu, dataTransfer nesnelerine değer eklemek için kullanılır.
  • getData: Depolanan değerleri almak için kullanılır.

Vue.js Sürükle ve Bırak Örneği

Daha iyi anlamak için sürükle ve bırak yönteminin nasıl çalıştığına dair örnekler görelim. Öncelikle aşağıdaki gibi iki farklı bileşen oluşturduğumuz dnd isimli yeni bir proje oluşturuyoruz.

İlk bileşen adı Table.vue olarak Tablo bileşeninin kodu aşağıdaki gibidir.

Kod:


":id=id
""sınıf=tablo
"@dragover.prevent
"@drop.prevent=drop
">

Makaleyi arkadaşlarınızla paylaşarak sitenin geliştirilmesine yardımcı olun!

Kategori:

Programlama dilleri