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

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.

--

--

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Safa Gayret

Safa Gayret

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.