Click and Drag
Demo can be found here.
What I learned on this mini-project.
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.