Geek Logbook

Tech sea log book

50projectsIn50days – Day 21: Drag And Drop

An HTML with 6 boxes. In the first one you have an image which you can drag and drop using the mouse.

The HTLM and CSS are simple. The only topic you may notice is that there are a number of functions which are used to show the user when they take the image.

On the document the class selected are the boxes that are empty and the one that it is fill

const fill = document.querySelector('.fill')
const empties = document.querySelectorAll('.empty')

The fill and empties variables have an event listener which are wainting for the following events:

The events fires differents behaviuors which impacts in the visual display of the element in the HTML. Basically, the custom function fired change the CSS class so, the user sees the elment as moving from one box to another.

In the dragOver and dragEnter function we use preventDefault() function. This function in a instance method with the following quailities:

The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Event: preventDefault() method

You can see the code in this GitHub Repository: 21.drag_and_drop and the demo of the project is here: Movie App

Leave a Reply

Your email address will not be published. Required fields are marked *.

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>