title
Drag & Drop With Vanilla JS

description
In this video we will take a look at drag events in JavaScript to be able to create drag and drop functionality Code: https://codepen.io/bradtraversy/pen/odmVgN 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia The Developer Hangout: Public Discord Server https://discord.gg/developers

detail
{'title': 'Drag & Drop With Vanilla JS', 'heatmap': [{'end': 160.341, 'start': 148.115, 'weight': 0.751}, {'end': 355.934, 'start': 337.306, 'weight': 0.798}, {'end': 422.826, 'start': 409.868, 'weight': 0.805}, {'end': 652.59, 'start': 637.879, 'weight': 0.712}, {'end': 708.972, 'start': 695.104, 'weight': 0.94}, {'end': 947.319, 'start': 920.533, 'weight': 0.83}, {'end': 1101.157, 'start': 1056.784, 'weight': 0.757}], 'summary': 'Learn javascript drag and drop application creation with html, css, and javascript, enabling image movement with hover effects, including setting attributes, creating variables, adding event listeners, handling drag events, and utilizing html5 features for ui implementation.', 'chapters': [{'end': 349.149, 'segs': [{'end': 72.327, 'src': 'embed', 'start': 7.039, 'weight': 0, 'content': [{'end': 7.54, 'text': "what's going on?", 'start': 7.039, 'duration': 0.501}, {'end': 15.868, 'text': "guys, in this tutorial we're going to look at javascript, drag and drop events and we're going to create this little application here with some html,", 'start': 7.54, 'duration': 8.328}, {'end': 17.57, 'text': 'css, javascript,', 'start': 15.868, 'duration': 1.702}, {'end': 27.34, 'text': "and we're going to be able to grab an image and you'll see when i hover over any of these boxes that it gets darker and it gets a different kind of border and i can drop it in.", 'start': 17.57, 'duration': 9.77}, {'end': 30.064, 'text': 'OK, so we can move it into any of these boxes.', 'start': 27.901, 'duration': 2.163}, {'end': 38.295, 'text': "Now, obviously, this by itself is not really a full application, but I'm going to show you how to implement this kind of UI, so you could, you know,", 'start': 30.485, 'duration': 7.81}, {'end': 42.501, 'text': "use it in a game or anything where you'd want this kind of effect.", 'start': 38.295, 'duration': 4.206}, {'end': 44.843, 'text': "All right, so let's go ahead and get started.", 'start': 43.041, 'duration': 1.802}, {'end': 49.388, 'text': "I'm going to open up VS Code, and I have my file structure already complete.", 'start': 44.863, 'duration': 4.525}, {'end': 52.671, 'text': "Basically, it's just an index HTML file.", 'start': 49.788, 'duration': 2.883}, {'end': 56.055, 'text': "It's a JS and CSS folder.", 'start': 53.152, 'duration': 2.903}, {'end': 58.157, 'text': 'The JS has a main JS file.', 'start': 56.255, 'duration': 1.902}, {'end': 60.759, 'text': 'The CSS has a style.css file.', 'start': 58.197, 'duration': 2.562}, {'end': 62.441, 'text': "All right, so they're all empty.", 'start': 61.16, 'duration': 1.281}, {'end': 65.724, 'text': "If you're following along, just go ahead and create those files.", 'start': 63.122, 'duration': 2.602}, {'end': 68.666, 'text': "So in the index.html, I'm just going to use Emmet.", 'start': 66.485, 'duration': 2.181}, {'end': 70.606, 'text': "I'm going to say exclamation tab.", 'start': 68.686, 'duration': 1.92}, {'end': 72.327, 'text': 'That will give me kind of a boilerplate.', 'start': 70.646, 'duration': 1.681}], 'summary': 'Tutorial on creating a javascript drag-and-drop application with html, css, and javascript to achieve a ui effect.', 'duration': 65.288, 'max_score': 7.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c7039.jpg'}, {'end': 177.237, 'src': 'heatmap', 'start': 148.115, 'weight': 0.751, 'content': [{'end': 154.446, 'text': 'And we want to add onto this the HTML5 property draggable because we wanted this to be set to true.', 'start': 148.115, 'duration': 6.331}, {'end': 156.709, 'text': "Otherwise, we won't be able to drag it at all.", 'start': 154.566, 'duration': 2.143}, {'end': 160.341, 'text': "So let's save that and that's it for our HTML.", 'start': 157.378, 'duration': 2.963}, {'end': 167.948, 'text': "So next we'll move on to the style CSS and I'm just gonna add a background color to the body.", 'start': 160.942, 'duration': 7.006}, {'end': 177.237, 'text': "I'll say background, let's do dark salmon and that's all I'm gonna do with the body.", 'start': 168.229, 'duration': 9.008}], 'summary': 'Adding html5 draggable property set to true and setting a dark salmon background color to the body in css.', 'duration': 29.122, 'max_score': 148.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c148115.jpg'}], 'start': 7.039, 'title': 'Javascript drag and drop tutorial', 'summary': 'Covers creating a javascript drag and drop application using html, css, and javascript, allowing users to grab and move images into different boxes with hover effects. it also explains the process of creating an html file with associated js and css folders, adding drag and drop functionality, designing elements using emmet, and styling with css, including specific properties and attributes.', 'chapters': [{'end': 49.388, 'start': 7.039, 'title': 'Javascript drag and drop tutorial', 'summary': 'Covers creating a javascript drag and drop application using html, css, and javascript, allowing users to grab and move images into different boxes with hover effects.', 'duration': 42.349, 'highlights': ['The tutorial demonstrates creating a JavaScript drag and drop application using HTML, CSS, and JavaScript.', 'Users can grab and move images into different boxes with hover effects.', 'The chapter provides guidance on implementing the UI for use in games or any scenario requiring such effects.']}, {'end': 349.149, 'start': 49.788, 'title': 'Creating drag and drop interface', 'summary': 'Explains the process of creating an html file with associated js and css folders, adding drag and drop functionality, designing elements using emmet, and styling with css, including specific properties and attributes.', 'duration': 299.361, 'highlights': ['Creating HTML file with associated JS and CSS folders The process involves creating an index.html file, a JS folder with a main JS file, and a CSS folder with a style.css file.', 'Adding drag and drop functionality The JavaScript code includes adding drag events for elements, such as drag start, drag over, and drop, to enable drag and drop functionality.', 'Designing elements using Emmet and adding CSS styling The use of Emmet to create HTML elements, such as divs with specific classes, and the application of CSS properties like background color, image, position, height, width, margin, border, and background color to style the interface.']}], 'duration': 342.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c7039.jpg', 'highlights': ['The tutorial demonstrates creating a JavaScript drag and drop application using HTML, CSS, and JavaScript.', 'Users can grab and move images into different boxes with hover effects.', 'The chapter provides guidance on implementing the UI for use in games or any scenario requiring such effects.', 'Creating HTML file with associated JS and CSS folders The process involves creating an index.html file, a JS folder with a main JS file, and a CSS folder with a style.css file.', 'Adding drag and drop functionality The JavaScript code includes adding drag events for elements, such as drag start, drag over, and drop, to enable drag and drop functionality.', 'Designing elements using Emmet and adding CSS styling The use of Emmet to create HTML elements, such as divs with specific classes, and the application of CSS properties like background color, image, position, height, width, margin, border, and background color to style the interface.']}, {'end': 711.499, 'segs': [{'end': 384.659, 'src': 'embed', 'start': 349.209, 'weight': 0, 'content': [{'end': 350.97, 'text': "We can move it, but we can't do it.", 'start': 349.209, 'duration': 1.761}, {'end': 352.191, 'text': "It's not doing anything else.", 'start': 351.03, 'duration': 1.161}, {'end': 355.934, 'text': "If we set draggable to false, we wouldn't be able to do this.", 'start': 353.172, 'duration': 2.762}, {'end': 358.396, 'text': "So that's why we need that that attribute.", 'start': 356.014, 'duration': 2.382}, {'end': 362.099, 'text': 'So back to the CSS, we have a couple other things to do.', 'start': 359.437, 'duration': 2.662}, {'end': 370.405, 'text': "Basically, when we click on it and we hold down the mouse and we're dragging it, I want to add a class called hold.", 'start': 362.319, 'duration': 8.086}, {'end': 374.988, 'text': "And for that class, I'm just going to add a not a background, a border.", 'start': 371.265, 'duration': 3.723}, {'end': 384.659, 'text': "And let's do solid light gray 4 pixels.", 'start': 377.455, 'duration': 7.204}], 'summary': 'Css code adds hold class for dragging element with solid light gray 4-pixel border.', 'duration': 35.45, 'max_score': 349.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c349209.jpg'}, {'end': 433.196, 'src': 'heatmap', 'start': 409.868, 'weight': 0.805, 'content': [{'end': 417.044, 'text': "And this is just going to be displaying none, and I'll show you why we need this in a little bit.", 'start': 409.868, 'duration': 7.176}, {'end': 420.864, 'text': 'All right, so that should be good.', 'start': 418.922, 'duration': 1.942}, {'end': 422.826, 'text': 'Now we can start on the JavaScript.', 'start': 420.904, 'duration': 1.922}, {'end': 426.429, 'text': 'So we have basically two elements to work with.', 'start': 423.226, 'duration': 3.203}, {'end': 430.833, 'text': 'We have the fill, which is the filled box with the image, and then we have the empties.', 'start': 426.469, 'duration': 4.364}, {'end': 433.196, 'text': "So let's create variables for those.", 'start': 431.274, 'duration': 1.922}], 'summary': 'Creating variables for two elements in javascript.', 'duration': 23.328, 'max_score': 409.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c409868.jpg'}, {'end': 459.81, 'src': 'embed', 'start': 431.274, 'weight': 2, 'content': [{'end': 433.196, 'text': "So let's create variables for those.", 'start': 431.274, 'duration': 1.922}, {'end': 438.941, 'text': "So fill, and we'll set it to document.querySelector.", 'start': 433.296, 'duration': 5.645}, {'end': 443.105, 'text': 'And it has a class of fill, so we want to put in here .fill.', 'start': 439.962, 'duration': 3.143}, {'end': 448.826, 'text': "All right, and then for the empties, there's multiple empty blocks.", 'start': 444.485, 'duration': 4.341}, {'end': 459.81, 'text': "So I'm actually gonna call this empties, or you call it boxes or whatever you want, but I'm gonna set it to document.querySelectorAll,", 'start': 448.926, 'duration': 10.884}], 'summary': 'Creating variables for fill and empties using document.queryselector and document.queryselectorall.', 'duration': 28.536, 'max_score': 431.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c431274.jpg'}, {'end': 548.872, 'src': 'embed', 'start': 518.049, 'weight': 3, 'content': [{'end': 519.571, 'text': 'I used to make that mistake all the time.', 'start': 518.049, 'duration': 1.522}, {'end': 524.073, 'text': "Then we'll say drag end as the function.", 'start': 520.812, 'duration': 3.261}, {'end': 525.815, 'text': 'All right.', 'start': 525.474, 'duration': 0.341}, {'end': 534.54, 'text': "So let's let's create a comment here and let's say fill not fill drag functions.", 'start': 525.935, 'duration': 8.605}, {'end': 541.084, 'text': "OK, so we'll have drag start and we need to add function here.", 'start': 535.6, 'duration': 5.484}, {'end': 543.125, 'text': 'So drag start.', 'start': 542.084, 'duration': 1.041}, {'end': 548.872, 'text': "And let's add function drag end.", 'start': 545.59, 'duration': 3.282}], 'summary': 'Creating and defining drag start and drag end functions for a comment', 'duration': 30.823, 'max_score': 518.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c518049.jpg'}, {'end': 627.812, 'src': 'embed', 'start': 589.37, 'weight': 1, 'content': [{'end': 592.111, 'text': "And now I'm going to click and hold and move it.", 'start': 589.37, 'duration': 2.741}, {'end': 594.593, 'text': "And you'll see that in the console, we see start.", 'start': 592.151, 'duration': 2.442}, {'end': 596.794, 'text': 'And then when I let go, we see end.', 'start': 595.053, 'duration': 1.741}, {'end': 600.416, 'text': "So those are the events that we're watching for here.", 'start': 596.854, 'duration': 3.562}, {'end': 608.901, 'text': 'Now, when I grab it and it starts, we want to add the hold class, which is this here, which gives it a border, a gray border.', 'start': 600.916, 'duration': 7.985}, {'end': 614.404, 'text': "And you don't have to do this, but I just want to kind of show you guys the different events and what we can do.", 'start': 609.521, 'duration': 4.883}, {'end': 627.812, 'text': "So let's do this, meaning the fill element that we grab and we want to call class name or the class name property and and we want to append to it.", 'start': 615.004, 'duration': 12.808}], 'summary': 'Demonstration of adding a class on hold event in console.', 'duration': 38.442, 'max_score': 589.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c589370.jpg'}, {'end': 668.588, 'src': 'heatmap', 'start': 637.879, 'weight': 0.712, 'content': [{'end': 641.202, 'text': "And then let's see what happens if we just do that.", 'start': 637.879, 'duration': 3.323}, {'end': 647.166, 'text': "So if I grab it and I move it, notice that it's not really taking it out of the box.", 'start': 642.363, 'duration': 4.803}, {'end': 649.528, 'text': "It kind of doubles and that's we don't want that.", 'start': 647.206, 'duration': 2.322}, {'end': 652.59, 'text': "That's where the invisible class comes in and we want to use that.", 'start': 649.568, 'duration': 3.022}, {'end': 660.403, 'text': "But if I were to say this dot class name and I'm going to use equals which is going to replace it.", 'start': 653.231, 'duration': 7.172}, {'end': 663.565, 'text': "OK It's going to just give it the invisible class and that's it.", 'start': 660.723, 'duration': 2.842}, {'end': 668.588, 'text': "If I were to just do that when I click it it disappears and we don't want that.", 'start': 664.165, 'duration': 4.423}], 'summary': 'Demonstrating issue with moving item and using invisible class to fix it.', 'duration': 30.709, 'max_score': 637.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c637879.jpg'}, {'end': 689.721, 'src': 'embed', 'start': 660.723, 'weight': 4, 'content': [{'end': 663.565, 'text': "OK It's going to just give it the invisible class and that's it.", 'start': 660.723, 'duration': 2.842}, {'end': 668.588, 'text': "If I were to just do that when I click it it disappears and we don't want that.", 'start': 664.165, 'duration': 4.423}, {'end': 672.73, 'text': 'What we want is us is a very minute delay.', 'start': 668.748, 'duration': 3.982}, {'end': 674.971, 'text': "So we're going to use set time out here.", 'start': 673.13, 'duration': 1.841}, {'end': 682.296, 'text': "So we're going to say set time out and set time out takes in a function a callback.", 'start': 675.052, 'duration': 7.244}, {'end': 689.721, 'text': "So when you use an arrow here and then I'm just going to grab this and put it here.", 'start': 682.316, 'duration': 7.405}], 'summary': 'Applying a minute delay to prevent immediate disappearance using settimeout.', 'duration': 28.998, 'max_score': 660.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c660723.jpg'}, {'end': 721.91, 'src': 'heatmap', 'start': 695.104, 'weight': 0.94, 'content': [{'end': 700.707, 'text': 'but we can actually just put a zero here just to make it so that this happens after we actually move it.', 'start': 695.104, 'duration': 5.603}, {'end': 702.708, 'text': "So let's try that.", 'start': 700.807, 'duration': 1.901}, {'end': 706.33, 'text': "And now you can see I'm actually pulling it out of the box.", 'start': 703.409, 'duration': 2.921}, {'end': 708.972, 'text': 'So that part is actually very important.', 'start': 706.751, 'duration': 2.221}, {'end': 711.499, 'text': 'then for drag end.', 'start': 710.257, 'duration': 1.242}, {'end': 714.902, 'text': "all we're going to do is set the class back to fill.", 'start': 711.499, 'duration': 3.403}, {'end': 717.325, 'text': 'so this dot class name.', 'start': 714.902, 'duration': 2.423}, {'end': 721.91, 'text': "we're not appending it, we're just setting it back to fill like that.", 'start': 717.325, 'duration': 4.585}], 'summary': "Demonstrate moving an object out of a box and setting class to 'fill' on drag end.", 'duration': 26.806, 'max_score': 695.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c695104.jpg'}], 'start': 349.209, 'title': 'Drag and drop elements with css and javascript', 'summary': "Covers the css and javascript required for creating drag and drop elements, including setting draggable attribute, adding classes for hold and hovered states, creating variables for fill and empty elements, as well as adding drag start and drag end event listeners and functions to handle drag and drop functionality, demonstrating the usage of set time out for a delayed action and the addition of classes to manipulate the element's appearance and behavior.", 'chapters': [{'end': 483.378, 'start': 349.209, 'title': 'Css and javascript for drag and drop elements', 'summary': 'Covers the css and javascript required for creating drag and drop elements, including setting draggable attribute, adding classes for hold and hovered states, and creating variables for fill and empty elements.', 'duration': 134.169, 'highlights': ['The chapter covers the CSS and JavaScript required for creating drag and drop elements.', 'Setting draggable attribute allows the element to be moved without disabling it.', 'Adding classes for hold and hovered states enhances the visual feedback during drag and drop interactions.', 'Creating variables for fill and empty elements enables manipulation and interaction with the drag and drop components.']}, {'end': 711.499, 'start': 483.718, 'title': 'Adding drag events and functions', 'summary': "Discusses adding drag start and drag end event listeners and functions to handle drag and drop functionality, demonstrating the usage of set time out for a delayed action and the addition of classes to manipulate the element's appearance and behavior.", 'duration': 227.781, 'highlights': ['The chapter discusses adding drag start and drag end event listeners and functions to handle drag and drop functionality.', 'Demonstrates the usage of set time out for a delayed action.', "Shows the addition of classes to manipulate the element's appearance and behavior."]}], 'duration': 362.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c349209.jpg', 'highlights': ['Covers the CSS and JavaScript required for creating drag and drop elements.', 'Adding classes for hold and hovered states enhances visual feedback during interactions.', 'Creating variables for fill and empty elements enables manipulation and interaction.', 'Discusses adding drag start and drag end event listeners and functions for functionality.', 'Demonstrates the usage of set time out for a delayed action.']}, {'end': 1138.997, 'segs': [{'end': 766.843, 'src': 'embed', 'start': 711.499, 'weight': 0, 'content': [{'end': 714.902, 'text': "all we're going to do is set the class back to fill.", 'start': 711.499, 'duration': 3.403}, {'end': 717.325, 'text': 'so this dot class name.', 'start': 714.902, 'duration': 2.423}, {'end': 721.91, 'text': "we're not appending it, we're just setting it back to fill like that.", 'start': 717.325, 'duration': 4.585}, {'end': 730.922, 'text': "so now, when i let go it actually you know, it's still there, it doesn't disappear, All right, and that's pretty much it for the fill listeners.", 'start': 721.91, 'duration': 9.012}, {'end': 733.763, 'text': 'Now we want to handle the empties.', 'start': 731.883, 'duration': 1.88}, {'end': 739.746, 'text': "All right, now since this is a node list and not a single element, we're going to just loop through.", 'start': 734.444, 'duration': 5.302}, {'end': 743.888, 'text': "So let's say loop through empties.", 'start': 740.466, 'duration': 3.422}, {'end': 753.753, 'text': "And.. We'll loop through the empties and call drag events.", 'start': 745.749, 'duration': 8.004}, {'end': 756.615, 'text': "So I'm going to use a for of loop here.", 'start': 754.313, 'duration': 2.302}, {'end': 761.359, 'text': "So we can say for const, and I'm going to call this empty.", 'start': 757.696, 'duration': 3.663}, {'end': 765.041, 'text': "This is the variable we'll use within the loop of empties.", 'start': 761.399, 'duration': 3.642}, {'end': 766.843, 'text': 'All right.', 'start': 766.543, 'duration': 0.3}], 'summary': 'Setting class back to fill, handling empties with a loop.', 'duration': 55.344, 'max_score': 711.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c711499.jpg'}, {'end': 947.319, 'src': 'heatmap', 'start': 909.624, 'weight': 2, 'content': [{'end': 920.453, 'text': "And actually, you know what? Drop isn't even going to run because the drag over, we actually have to prevent the default behavior.", 'start': 909.624, 'duration': 10.829}, {'end': 924.957, 'text': 'So we can pass in an event parameter since this was part of an event listener.', 'start': 920.533, 'duration': 4.424}, {'end': 928.06, 'text': "It's a response or callback for an event listener.", 'start': 925.518, 'duration': 2.542}, {'end': 933.505, 'text': 'And then we can say E dot prevent default like that.', 'start': 928.44, 'duration': 5.065}, {'end': 939.891, 'text': 'So now if we go back and I let go, now you can see it actually calls drop.', 'start': 934.165, 'duration': 5.726}, {'end': 942.414, 'text': 'Okay, I know that this is really small.', 'start': 939.911, 'duration': 2.503}, {'end': 947.319, 'text': "But it's calling all the events that it should and all the functions that it should, which is good.", 'start': 943.235, 'duration': 4.084}], 'summary': 'Event listener callback prevents default behavior, ensuring all functions are called as expected.', 'duration': 30.267, 'max_score': 909.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c909624.jpg'}, {'end': 993.614, 'src': 'embed', 'start': 957.611, 'weight': 4, 'content': [{'end': 962.715, 'text': "rather than just watching me code and not showing you like what's going on.", 'start': 957.611, 'duration': 5.104}, {'end': 969.179, 'text': 'So drag over is just that.', 'start': 964.036, 'duration': 5.143}, {'end': 972.462, 'text': "It's just going to, we're just going to prevent the default.", 'start': 970.04, 'duration': 2.422}, {'end': 973.643, 'text': 'Now drag enter.', 'start': 972.622, 'duration': 1.021}, {'end': 976.645, 'text': 'We also want to prevent the default at first.', 'start': 974.143, 'duration': 2.502}, {'end': 986.59, 'text': 'And then what we want to do is we want to add the hovered class.', 'start': 982.047, 'duration': 4.543}, {'end': 991.733, 'text': 'So this.classname and we want to append hovered.', 'start': 986.67, 'duration': 5.063}, {'end': 993.614, 'text': 'So space hovered.', 'start': 991.853, 'duration': 1.761}], 'summary': 'Demonstrating drag over action with prevention of default behavior and addition of a hovered class.', 'duration': 36.003, 'max_score': 957.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c957611.jpg'}, {'end': 1052.763, 'src': 'embed', 'start': 1024.166, 'weight': 5, 'content': [{'end': 1028.708, 'text': "So when we enter, it's going to be have the class of empty and hovered.", 'start': 1024.166, 'duration': 4.542}, {'end': 1032.15, 'text': "But when we leave, it's going to go back to just empty.", 'start': 1029.128, 'duration': 3.022}, {'end': 1034.971, 'text': "It's going to get rid of the hovered because this replaces it.", 'start': 1032.19, 'duration': 2.781}, {'end': 1036.592, 'text': 'OK, this appends to it.', 'start': 1034.991, 'duration': 1.601}, {'end': 1037.652, 'text': 'This replaces it.', 'start': 1036.672, 'duration': 0.98}, {'end': 1044.315, 'text': "And then finally, for drag drop, we want to I don't know why I'm writing div.", 'start': 1038.673, 'duration': 5.642}, {'end': 1047.936, 'text': 'We want to set the class name to empty.', 'start': 1044.836, 'duration': 3.1}, {'end': 1052.763, 'text': 'But we also want to append the fill.', 'start': 1050.382, 'duration': 2.381}], 'summary': 'Class changes from empty to hovered on entry and back to empty on exit', 'duration': 28.597, 'max_score': 1024.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c1024165.jpg'}, {'end': 1101.157, 'src': 'heatmap', 'start': 1056.784, 'weight': 0.757, 'content': [{'end': 1063.625, 'text': 'I mean actually take the fill element, which we defined right here, and append it into the empty div.', 'start': 1056.784, 'duration': 6.841}, {'end': 1069.327, 'text': 'So if we look at our HTML, we want to be able to move this around into each of these.', 'start': 1064.626, 'duration': 4.701}, {'end': 1072.247, 'text': 'And we do that with the append method.', 'start': 1069.767, 'duration': 2.48}, {'end': 1074.268, 'text': 'So we can say this.append.', 'start': 1072.307, 'duration': 1.961}, {'end': 1080.132, 'text': "So this meaning the empty that we're dropping in.", 'start': 1076.005, 'duration': 4.127}, {'end': 1084.017, 'text': 'And we want to append the entire fill element.', 'start': 1080.833, 'duration': 3.184}, {'end': 1085.479, 'text': 'And that should do it.', 'start': 1084.658, 'duration': 0.821}, {'end': 1086.301, 'text': "So let's try it.", 'start': 1085.56, 'duration': 0.741}, {'end': 1089.413, 'text': "So I'll grab this.", 'start': 1088.553, 'duration': 0.86}, {'end': 1091.534, 'text': "And now as I hover, you'll see that effect.", 'start': 1089.493, 'duration': 2.041}, {'end': 1094.215, 'text': "And then when I drop, it'll actually drop in.", 'start': 1091.994, 'duration': 2.221}, {'end': 1101.157, 'text': "And if we look at our console over here, you'll see right now it's in the second one, the fill.", 'start': 1094.615, 'duration': 6.542}], 'summary': 'Appending fill element to empty div using append method.', 'duration': 44.373, 'max_score': 1056.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c1056784.jpg'}, {'end': 1132.291, 'src': 'embed', 'start': 1105.378, 'weight': 3, 'content': [{'end': 1108.779, 'text': "If I move it to the end one, now it's in the end one.", 'start': 1105.378, 'duration': 3.401}, {'end': 1109.259, 'text': 'All right.', 'start': 1108.999, 'duration': 0.26}, {'end': 1112.9, 'text': "So we're essentially moving it around the DOM, which is what we want.", 'start': 1109.319, 'duration': 3.581}, {'end': 1119.481, 'text': 'And this is all possible because of these drag events and because of the HTML5 draggable property.', 'start': 1113.876, 'duration': 5.605}, {'end': 1123.704, 'text': 'All right, so hopefully that kind of explains drag drop to you guys.', 'start': 1120.081, 'duration': 3.623}, {'end': 1132.291, 'text': "Obviously, this isn't like a real application, but this is something that you would implement into the UI of your application if you wanted to.", 'start': 1124.925, 'duration': 7.366}], 'summary': 'Moving elements around the dom using drag events and html5 draggable property.', 'duration': 26.913, 'max_score': 1105.378, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c1105378.jpg'}], 'start': 711.499, 'title': 'Handling drag and drop events', 'summary': 'Covers setting a class back to fill, looping through a node list to handle drag events, and preventing default behavior when dropping an item, showcasing how the events and functions are called during the drag and drop process. it also explains the html5 drag and drop feature, demonstrating how to use drag events to move elements, with examples of preventing default behavior, adding and removing classes, and appending elements, showcasing its potential for ui implementation.', 'chapters': [{'end': 957.611, 'start': 711.499, 'title': 'Handling drag events in javascript', 'summary': 'Covers setting a class back to fill, looping through a node list to handle drag events, and preventing default behavior when dropping an item, showcasing how the events and functions are called during the drag and drop process.', 'duration': 246.112, 'highlights': ['The chapter covers setting a class back to fill, ensuring that the element does not disappear, and moving on to handle the empties through a for of loop.', 'Looping through a node list to handle drag events, including drag over, drag enter, drag leave, and drag drop, showcasing the functions being called during the drag and drop process.', "Preventing default behavior when dropping an item by using event parameter and 'E.preventDefault()', ensuring that the drop function is called as expected during the drag and drop process."]}, {'end': 1138.997, 'start': 957.611, 'title': 'Html5 drag and drop explained', 'summary': 'Explains the html5 drag and drop feature, demonstrating how to use drag events to move elements, with examples of preventing default behavior, adding and removing classes, and appending elements, showcasing its potential for ui implementation.', 'duration': 181.386, 'highlights': ['The HTML5 drag and drop feature allows for elements to be moved around the DOM using drag events, with examples of preventing default behavior, adding and removing classes, and appending elements.', "The drag over event is used to prevent the default behavior, while the drag enter event adds the 'hovered' class and the drag leave event removes it, showcasing the manipulation of classes during the drag and drop process.", "During drag drop, the class name is set to 'empty' and the fill element is appended into the empty div, demonstrating the use of the append method to move elements within the DOM."]}], 'duration': 427.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C22hQKE_32c/pics/C22hQKE_32c711499.jpg', 'highlights': ['The chapter covers setting a class back to fill and handling empties through a for of loop.', 'Looping through a node list to handle drag events, showcasing the functions being called during the drag and drop process.', "Preventing default behavior when dropping an item by using event parameter and 'E.preventDefault()'.", 'The HTML5 drag and drop feature allows for elements to be moved around the DOM using drag events.', "The drag over event is used to prevent the default behavior, while the drag enter event adds the 'hovered' class.", "During drag drop, the class name is set to 'empty' and the fill element is appended into the empty div."]}], 'highlights': ['Learn javascript drag and drop application creation with html, css, and javascript, enabling image movement with hover effects, including setting attributes, creating variables, adding event listeners, handling drag events, and utilizing html5 features for ui implementation.', 'The tutorial demonstrates creating a JavaScript drag and drop application using HTML, CSS, and JavaScript.', 'Users can grab and move images into different boxes with hover effects.', 'The chapter provides guidance on implementing the UI for use in games or any scenario requiring such effects.', 'Covers the CSS and JavaScript required for creating drag and drop elements.', 'Adding classes for hold and hovered states enhances visual feedback during interactions.', 'Creating variables for fill and empty elements enables manipulation and interaction.', 'The chapter covers setting a class back to fill and handling empties through a for of loop.', 'Looping through a node list to handle drag events, showcasing the functions being called during the drag and drop process.', "Preventing default behavior when dropping an item by using event parameter and 'E.preventDefault()'.", 'The HTML5 drag and drop feature allows for elements to be moved around the DOM using drag events.', "During drag drop, the class name is set to 'empty' and the fill element is appended into the empty div."]}