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

javascript move div on click

EatSleepCodeRepeat answered on June 28, 2022 Popularity 5/10 Helpfulness 1/10

answer javascript move div on click

related move element onclick javascript

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

Closely Related Answers

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: move element onclick javascript javascri

Link to this answer
Share Copy Link

Contributed on Jun 28 2022

Bhavesh Gohil

0 Answers Avg Quality 2/10

javascript move div on click

Contents

More Related Answers

javascript move div on click

Closely Related Answers

move element onclick javascript

Grepper

Documentation

Social

Legal

Contact

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