I have a bit of a designer's background, and I'm used to programs like Photoshop, Illustrator, and so forth, allowing me to option drag an element in order to clone it. Well, I want this Trello board to do the same thing. So how are we going to pull that off? js, which remember powers view draggable under the hood, you can see that our group prop can be a string like we've been doing it thus far.
But we could also provide it an object where we specify a pull property with the value of clone. This allows us to change the behavior when an item is dragged from simply moving it from one array to another to cloning it into the new array. You can see right down here the explanation of this group option. Let's just read that quickly together.
It says to drag elements from one list to another, both lists must have the same group value, which is what we've already seen. But you can also define whether lists can give away, give and keep a copy that is clone, which is exactly what we want, and receive elements. So we can set this pull property on the object we passed to group to clone. And that's going to copy the item rather than move it.
So back in the code, let's change the value of group to be an object. It will have the name of tasks. And at this point, this is the exact same setting as we provided just with the string. But now let me add the pull property on here and we'll set it to clone.
Great. Now over here on the right hand side in my browser, When I drag my task here, you'll see that we have cloned it from the backlog column into the selected for dev column. However, that's what we're doing now for all of the dragging and dropping. Let's only give pull the value of clone when the alt or option key is being held down.
I'll do a little bit of pseudo code and we'll just say alt pretending it's already defined and so If alt is being held down, then we will set pole to clone. Otherwise, we will just set it to true. True is the value that pole gets by default. All right, now let's make alt actually work.
Up in the script setup section, let's take a composable from view use called use key modifier, and we'll pass it the string of alt. That is the key we want to listen to. Finally, The return from use key modifier is a reactive boolean value that tells us whether or not the modifier key is being held down. Now whenever the alt or option key on the mac is pressed alt will be true and we'll change the pull behavior of our draggable to clone.
Awesome that was actually really simple. Let's come over here to the browser now and see if it worked. I'll drag develop cool new feature back to the backlog column, and since I didn't hold down the option key, we moved the task and we didn't clone it. Now if I hold in option and move it back to selected for dev, the issue is successfully cloned.
This is what I would consider a pretty advanced feature, and we were able to pull it off with just a couple of lines of code in view. I have a bit of a designer's background, and I'm used to programs like Photoshop, Illustrator, and so forth, allowing me to option drag an element in order to clone it. Well, I want this Trello board to do the same thing. So how are we going to pull that off?
js, which remember powers view draggable under the hood, you can see that our group prop can be a string like we've been doing it thus far. But we could also provide it an object where we specify a pull property with the value of clone. This allows us to change the behavior when an item is dragged from simply moving it from one array to another to cloning it into the new array. You can see right down here the explanation of this group option.
Let's just read that quickly together. It says to drag elements from one list to another, both lists must have the same group value, which is what we've already seen. But you can also define whether lists can give away, give and keep a copy that is clone, which is exactly what we want, and receive elements. So we can set this pull property on the object we passed to group to clone.
And that's going to copy the item rather than move it. So back in the code, let's change the value of group to be an object. It will have the name of tasks. And at this point, this is the exact same setting as we provided just with the string.
But now let me add the pull property on here and we'll set it to clone. Great. Now over here on the right hand side in my browser, When I drag my task here, you'll see that we have cloned it from the backlog column into the selected for dev column. However, that's what we're doing now for all of the dragging and dropping.
Let's only give pull the value of clone when the alt or option key is being held down. I'll do a little bit of pseudo code and we'll just say alt pretending it's already defined and so If alt is being held down, then we will set pole to clone. Otherwise, we will just set it to true. True is the value that pole gets by default.
All right, now let's make alt actually work. Up in the script setup section, let's take a composable from view use called use key modifier, and we'll pass it the string of alt. That is the key we want to listen to. Finally, The return from use key modifier is a reactive boolean value that tells us whether or not the modifier key is being held down.
Now whenever the alt or option key on the mac is pressed alt will be true and we'll change the pull behavior of our draggable to clone. Awesome that was actually really simple. Let's come over here to the browser now and see if it worked. I'll drag develop cool new feature back to the backlog column, and since I didn't hold down the option key, we moved the task and we didn't clone it.
Now if I hold in option and move it back to selected for dev, the issue is successfully cloned. This is what I would consider a pretty advanced feature, and we were able to pull it off with just a couple of lines of code in view.