Approach 1: We have a web page where any kind of click or drag event is logged in the console. The basic difference between a click and a drag event is the mouse movement. The mouse event that differentiates a click and drag event is the “mouse move” event. In a “click” event, there is no “mouse move” event. However, the “mouse down” and “mouse up” event remains the same for both click and drag.
Output: On click and drag events , the output is displayed in the console as shown below.
Approach 2: The second approach is element specific and does not work for all the other elements in the web page. We choose an element to log the “click” or “drag” events. In the example below, a paragraph is chosen as the required element and we assign ‘draggable‘ and ‘clickable‘ attributes as true which means the element can be dragged as well as clicked.
When the element is clicked:
When the element is dragged:
- How to distinguish left and right mouse click using jQuery?
- How to get the coordinates of a mouse click on a canvas element ?
- What is the use of a double-click event in AngularJs?
- How to add active class on click event in custom list group in Bootstrap 4 ?
- How to create button dynamically with click event in Angular ?
- How to detect click event outside Angular component ?
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to create a To-Do list using Drag and Drop in Angular 7 ?
- HTML | Drag and Drop
- Drag and Drop Files in ElectronJS
- script.aculo.us Drag & Drop accept Option
- script.aculo.us Drag & Drop greedy Option
- script.aculo.us Drag & Drop hoverclass Option
- script.aculo.us Drag & Drop onDrop Option
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.