Draggable HTML element | mouseup, mousedown function | shivling animatio...

on

Draggable HTML element | mouseup, mousedown function | shivling animation html css javascript




Event Listeners for Mouse Actions on Copper_Dhara_Patra:

  • This event listener listens for the mousedown event on the Copper_Dhara_Patra element.
  • When the mouse button is pressed down on the element, it triggers a function.
  • Inside this function, there's a setTimeout function with a delay of 10 milliseconds. This timeout is used to differentiate between a click and a click-and-hold action.
  • If the mouse button is held down for more than 10 milliseconds, the class expand is added to Copper_Dhara_Patra, and the class active is toggled.

Event Listener for Mouse Release on Copper_Dhara_Patra:

  • This event listener listens for the mouseup event on the Copper_Dhara_Patra element.
  • When the mouse button is released, it triggers a function.
  • Inside this function, it clears the timeout (if any) set by the setTimeout function.
  • Then, it removes the classes expand and active from Copper_Dhara_Patra, and adds the class fade-out.

Event Listener for Transition End on Copper_Dhara_Patra:

  • This event listener listens for the transitionend event on the Copper_Dhara_Patra element.
  • When the transition ends (e.g., the fade-out animation completes), it triggers a function.
  • Inside this function, it removes the class fade-out from Copper_Dhara_Patra.

Event Listener for Mouse Leave on Copper_Dhara_Patra:

  • This event listener listens for the mouseleave event on the Copper_Dhara_Patra element.
  • When the mouse leaves the element, it triggers a function.
  • Inside this function, it clears the timeout (if any) set by the setTimeout function, and removes the classes expand and active from Copper_Dhara_Patra.

Function to Make an Element Draggable:

  • This is a reusable function that makes an element draggable.
  • It sets up event listeners for mousedown, mousemove, and mouseup events to track dragging behavior.
  • When the mouse is pressed down (mousedown), it records the initial position of the mouse and the element.
  • When the mouse moves (mousemove), it calculates the new position of the element based on the difference between the current mouse position and the initial position.
  • When the mouse button is released (mouseup), it stops the dragging behavior.

Comments

Post a Comment