VueJS’te sürükle bırak yapmak (Hazır paket kullanmadan)

“Amerika’yı yeniden keşfetmenin alemi yok, hazır bir paket varsa kullan konuyu kapat” ezberinin haklılık yanı elbette var ancak kullandığınız paket sayısı arttıkça projenin sağlığı zarar görebiliyor. Bu nedenle gelişen teknolojiyi takip edip, paket kullanmadan yapılabilecek işlemleri kendimiz yapmalıyız.

GitHub Repo: https://github.com/gayret/vue-drag-and-drop

Canlı demo: https://vue-drag-and-drop.netlify.app

HTML ve JavaScript kullanarak dakikalar içerisinde sürükle bırak işlemi yaptırabilirsiniz.

Hadi basit bir Todo geliştirelim

Öncelikle reaktif bir array oluşturalım.

const todos = reactive([
  {
    id: 1,
    title: 'Watch The Matrix',
    completed: false,
  },
  {
    id: 2,
    title: 'Write an essay about Vue',
    completed: false,
  },
  {
    id: 3,
    title: 'Learn NextJS',
    completed: true,
  },
])

Ardından bu array’daki bilgileri computed ile filtreleyip çekelim.

const thingToDo = computed(() => {
  return todos.filter((item) => !item.completed)
})
const completed = computed(() => {
  return todos.filter((item) => item.completed)
})

Sonrasında Vue Template bölümünde bir v-for döngüsü yaratalım. Böylece yapılacaklar listesini ortaya koyalım.

Listedeki item’lara draggable=’true’ attribute ekleyerek sürüklenebilir olmasını sağlayın.

<ul v-if="thingToDo.length > 0">
    <li
    v-for="(todo, index) in thingToDo"
    :key="todo.id"
    draggable="true"
    @dragstart="onDrag($event, todo.id)">
      <label>
        <input type="checkbox" v-model="todo.completed" />
          {{ todo.title }}
        </label>
    </li>
</ul>

Listedeki item’lardan hangisinin sürüklenmeye başladığını bilmemiz gerekiyor. Bunun için @dragstart event’ı gerçekleştiğinde tetiklenmek üzere onDrag methodumuzu yazalım. Bu methoda $event ve todo bilgilerini gönderelim.

const onDrag = (event, id) => {
  event.dataTransfer.setData('itemIndex', id)
}

onDrag methodumuz şunu yapar, Event’in dataTransfer alanına, daha sonra itemIndex key’i ile get edilebilecek şekilde set eder. Yani o an sürüklemeye başlanan item’ın Id bilgisini sanal bir state’e yazar.

Artık kullanıcının hangi item’ı sürüklediğini biliyoruz.

Kullanıcının sürüklediği item’ı bırakabileceği bir alan yaratalım

Sürüklenen item’ın bırakılmasını istediğimiz HTML element’e şu iki attribute’ü ekleyin. @dragenter.prevent @dragover.prevent

Ardından aynı HTML element’in @drop event’ı gerçekleştiğinde tetiklenmek üzere onDrop methodumuzu yazalım.

const onDrop = (event) => {
  const itemId = event.dataTransfer.getData('itemId')
  const item = todos.find((item) => item.id == itemId)
  const itemIndex = todos.indexOf(item)
  todos[itemIndex].completed = !todos[itemIndex].completed
}

Bu method ile, az önce set ettiğimiz Id bilgisine erişiyoruz, sonra Array’deki index konumunu öğreniyoruz. Güncellemek istediğimiz (completed) bilgisini değiştiriyoruz.

Hepsi bu kadar.

Hiçbir hazır paket kullanmadan sürükle bırakma işlemi yaptık.

Bu örnekte sürüklenen item önceki bulunduğu yerden silinip, sadece yeni konumunda bulunacak. Her iki yerde de bulunmasını istersek, bunu item’in state bilgisini mutate etmeden yapmalıyız. Belki ilerde bununla ilgili bir örnek ekleyerek bu yazıyı güncellerim.