Breaking News: Grepper is joining You.com. Read the official announcement!

move element onclick javascript

Bhavesh Gohil answered on June 28, 2022 Popularity 7/10 Helpfulness 3/10

answer move element onclick javascript

related javascript move div on click

move element onclick javascript

Comment

$(function()
{
  var expanded = false;
  $('#sidebar').click(function()
                      {
                          if (!expanded)
                          {
                              $(this).animate({'left' : '0px'}, {duration : 400});
                              expanded = true;
                          }
                          else
                          {
                             $(this).animate({'left' : '565px'}, {duration: 400});
                              expanded = false;
                          }
                      });
 });

//please check this link
http://jsfiddle.net/3DpfJ/5/

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: element javascript move onclick

Link to this answer
Share Copy Link

Contributed on Jun 28 2022

Bhavesh Gohil

0 Answers Avg Quality 2/10

Closely Related Answers

javascript move div on click

Comment

<!DOCTYPE html>
<html>
  <head>
    <title>Click and Drag Div</title>
    <style>
      #myDiv {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: red;
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div id="myDiv"></div>
    <script>
      var myDiv = document.getElementById("myDiv");
      var isDragging = false;
      var currentX;
      var currentY;
      var initialX;
      var initialY;
      var xOffset = 0;
      var yOffset = 0;
      
      myDiv.addEventListener("mousedown", dragStart);
      myDiv.addEventListener("mouseup", dragEnd);
      myDiv.addEventListener("mousemove", drag);
      
      function dragStart(e) {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
        
        if (e.target === myDiv) {
          isDragging = true;
        }
      }
      
      function dragEnd(e) {
        initialX = currentX;
        initialY = currentY;
        
        isDragging = false;
      }
      
      function drag(e) {
        if (isDragging) {
          e.preventDefault();
          
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
          
          xOffset = currentX;
          yOffset = currentY;
          
          setTranslate(currentX, currentY, myDiv);
        }
      }
      
      function setTranslate(xPos, yPos, el) {
        el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
      }
    </script>
  </body>
</html>

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: click javascript move

Link to this answer
Share Copy Link

Contributed on Feb 27 2023

EatSleepCodeRepeat

0 Answers Avg Quality 2/10

move element onclick javascript

Contents

More Related Answers

move element onclick javascript

Closely Related Answers

javascript move div on click

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.