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.

Hadi basit bir Todo geliştirelim

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,
},
])
const thingToDo = computed(() => {
return todos.filter((item) => !item.completed)
})
const completed = computed(() => {
return todos.filter((item) => item.completed)
})
<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>
const onDrag = (event, id) => {
event.dataTransfer.setData('itemIndex', id)
}

Kullanıcının sürüklediği item’ı bırakabileceği bir alan yaratalı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
}

--

--

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

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

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