HTML5////Javascript

Step 2. Create the Interactive Drag and Drop Program

2. Build an interactive program with JavaSript.	Create a drag and drop puzzle game. 1. Take a picture and cut it into 4 equal pieces in your favorite graphic editing program. Save the pictures as .png, .gif, or .jpg formats. 2. On your web page, show the user what the final image should look like. 3. Create the source image objects. Create 4 image tags with the images set to the four puzzle pieces. 4. Create the target div tags. Have 4 div tags. Use CSS so that the div tags are setup with a gray border and the same dimensions as the image puzzle pieces. 5. The user should be able to drag the pieces from the images to the div tags. When the user has dragged all four to the correct place, then display a message to the user that the user won the game! Note that there are many different ways to solve this problem. Its up to you to be creative. Ive given some direction. The goal is to meet the program requirements above, demonstrate your understanding of the DOM and write efficient code that works!
3. Review and document your program.	Review your program to make sure you also used descriptive names for the variables, classes and other elements and stuctures. Preview and test your program. Again, make sure there is adequate documentation in the CSS, HTML and JavaScript programs! If you need additional screen shots to show your program, just add them here.
Include a screen shot of your web pages showing your web page in the browser.
Show the HTML, CSS, and JavaScript code. /////////////////////////////////////////////////////// I have my work stored in codepen and the url is listed here. https://codepen.io/aznjackh/pen/rmpebE I have a code written, but it doesn't work, it drags but does not drop