Javascript 30 (Day 27)

Click and Drag

Demo can be found here.

What I learned on this mini-project.

Flag variable

These can be used to control the flow of a method or other piece of functionality.

They are mainly used to hold a value until some condition changes, after which you can modify the variable. One of the most common use cases for this is holding a boolean which is dependent on some other piece of code.

In this example, the isDown variable is used to track the state of the mouse. When the mousedown event is triggered the isDown variable is changed, which is used to add further functionality.

pageX and offsetLeft

In this project, the mousedown event is used to initiate the click and drag functionality. For this to work effectively, an anchor point was used, representing the initial click point, the pageX property of the event captures this value.

If a margin or padding is added, then the pageX value will be off, to compensate for this adjustment, you can subtract the pixels changed (from the parent element's offset) to the window.

The code to do this, is shown below.


Originally published at gist.github.com.