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

Utilize styled-components in next.js to import and resize .svg files seamlessly

Ways to stop a JavaScript function from running during page loading

Encountered a glitch during the npm installation process for mui core

Is it not feasible to place a well within a column using Bootstrap?

What is the best way to compare all the elements in an array to the entries in another object, while also storing the results of each comparison?

Trouble retrieving desired data from an array of objects in React Native

Issue encountered in AngularJS while configuring resources for the action `query`: Anticipated response was an object, but received an array instead

Replace the JS function in the bundle with a new custom function

A step-by-step guide on utilizing img src to navigate and upload images

When decoding a JWT, it may return the value of "[object Object]"

remove a specific element from an array

Transferring information to a function

Creating an editable list item with jQuery: A step-by-step guide

Why won't the value in jQuery attr() be updated?

What could be the reason for my component not getting the asynchronous data?

The command is not currently carrying out its function

Tips for configuring Webstorm to automatically change double quotes to single quotes when reformatting source code

vue implementing vuelidate for obligatory server fields

Select the first item that is visible and chosen

Can you provide a list of factors that influence coverage? Additionally, is there a specific algorithm available for calculating