In this video, learn about the drag-and-drop life cycle, the responsibilities of both the target and the item you're dragging, and how to transfer information from one event callback to the other.
- [Instructor] So we have our cards and a target.…Let's work on the drag and drop.…There are a couple of concepts we need to understand first.…We have two items, the item dragging and the destination.…The first step will be to set…the draggable to true on the dragging item…and then we're going to use the onDragStart event.…We're doing this because onDragStart…will allow us to use dataTransfer.…And we're going to use dataTransfer to pass the ID…from the item that we're dragging to the destination.…
And onDrag doesn't allow this.…On the destination target we're going to use an onDrop event…and a dragOver event.…Let's start with a card.…Back in our card object,…and after our onClick handler,…we'll go ahead and add on line 155 this card container.…And we'll set draggable to true.…That makes the element draggable.…
Then we'll add to the card container,…an ondragstart…and we'll set that to cardDrag.…We'll create our cardDrag function here after our cardClick.…And that's a function called cardDrag.…Now that of course gets the event.…
- Working with prototype and dynamic elements
- Using bind, call, and apply
- Using the Fisher–Yates formula
- When to use e.preventDefault() and when to avoid it
- Drag-and-drop life cycle
- Using prototypical inheritance to optimize your code
Skill Level Intermediate
Q: This course was updated on 1/16/2019. What changed?
A: The following topics were updated: propagation and drag and drop.