Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Question

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript.

    Draggable.create(".box", {
        bounds:$container,
        edgeResistance:0.65,
        type:"x,y",
        throwProps:true,
        autoScroll:true,
    });

Check out the Codepen solution here.

The final project will be in Vue, but for now, plain HTML, CSS, and Javascript will do the trick.

javascript html jquery css vue.js

Answer 1

Answer №1

This method may not be as slick as using jquery draggable, but it gets the job done.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        height: 100%;
        width: 100%;
      }

      body {
        background-color: black;
      }

      #container {
        background-color: #333;
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
      }

      #box {
        background-image: url(http://www.vgmaps.com/NewsArchives/April2005/LegendOfZelda-Link%27sAwakeningAdvance-Koholint.png);
        background-size: 100%;
        background-position: center;
        width: 100%;
        height: 100%;
        position: absolute;
      }

      #box:hover {
          cursor: move;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="box"></div>
    </div>
  </body>
  <script>
    dragElement(document.getElementById("container"));

    function dragElement(elmnt) {
      var pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;
      if (document.getElementById("box")) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById("box").onmousedown =
          dragMouseDown;
      } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
      }

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = elmnt.offsetTop - pos2 + "px";
        elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
      }

      function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }
  </script>
</html>

Answer 2

This method may not be as slick as using jquery draggable, but it gets the job done.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        height: 100%;
        width: 100%;
      }

      body {
        background-color: black;
      }

      #container {
        background-color: #333;
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
      }

      #box {
        background-image: url(http://www.vgmaps.com/NewsArchives/April2005/LegendOfZelda-Link%27sAwakeningAdvance-Koholint.png);
        background-size: 100%;
        background-position: center;
        width: 100%;
        height: 100%;
        position: absolute;
      }

      #box:hover {
          cursor: move;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="box"></div>
    </div>
  </body>
  <script>
    dragElement(document.getElementById("container"));

    function dragElement(elmnt) {
      var pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;
      if (document.getElementById("box")) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById("box").onmousedown =
          dragMouseDown;
      } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
      }

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = elmnt.offsetTop - pos2 + "px";
        elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
      }

      function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }
  </script>
</html>

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Answer №1

Similar questions

Adjust the color of the text in Ionic based on the condition

Retrieving a JSON object using a for loop

The click event is triggering before it is able to be removed by the code preceding the trigger

How PHP Processes Fragment Identifiers within URLs

Set the first link in a menu to be highlighted as active using jquery

Incorporate the 'noty' javascript library into your Rails 5 project

Need help troubleshooting a problem with the <tr><td> tag in vue.js?

Having issues displaying the & symbol in HTML from backend data

Automate Div Updates with Jquery upon Insertion of New Records in MySQL Database

What exactly comprises an HTTP Parameter Pollution attack within the context of Node.js and Express.js?

What is the process for implementing a fallback image in Material UI?

Is there a way to change a weather api into local time using ReactJS/JavaScript?

Utilizing AXIOS in React functional components for REST API integration

Creating a Node API that can patiently listen for external data

Identifying Shifts in Objects Using Angular 5

What steps can be taken to ensure that the design of this page flows seamlessly?

Website experiencing issues with moderating Facebook comments

Enhance dynamically generated HTML using jQuery Mobile

What is the functionality of this JQuery Popup?

How can I create a hyperlink that leads to multiple pages?