-0.8 C
New York
Monday, September 20, 2021
HomeJavaScriptDraggable a div in mobile and desktop browser

Draggable a div in mobile and desktop browser

Sometimes you may need to make a div draggable in your frontend area. HTML

<div id="rightDivPopup" class="draggableBox">
     <span id="poupCloseBtbn" onclick="vanishDiv()" title="Close">x</span>
     <h4>Experience the mofizul.com site</h4>
     <a href="https://mofizul.com.com" class="btn btn-info mt-3">Go there</a>
</div>

<script>
    var head = document.getElementsByTagName('head')[0];
    var js = document.createElement("script");

    if (screen.width > 414) {
        js.src = "computer.js";
    }
    else {
        js.src = "mobile.js";
    }

    head.appendChild(js);
</script>

CSS

.draggableBox {
  position: absolute;
  top: 72%;
  left: 85%;
  z-index: 9;
  background: #000;
  color: #fff;
  padding: 13px;
  border-radius: 8px;
  cursor: move !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.draggableBox h4 {
  font-size: 15px;
}
.draggableBox #poupCloseBtbn {
  float: right;
  cursor: pointer;
}

.draggableBox .btn {
  background-color: #10a025;
  color: #fff;
  border: 1px solid #10a025;
  padding: 3px 5px;
  line-height: 1.1;
  font-size: 14px;
}

Javascript: computer.js

function vanishDiv() {
  document.getElementById("rightDivPopup").style.display = "none";
}

// Make the DIV element draggable:
(() => {
  class Box {
    constructor() {
      this.box = document.querySelector(".draggableBox");
      this.handleMouseDown = this.handleMouseDown.bind(this);
      this.handleMouseUp = this.handleMouseUp.bind(this);
      this.handleMouseMove = this.handleMouseMove.bind(this);
    }

    handleMouseDown() {
      this.box.style.cursor = "move";
      this.box.addEventListener("mouseup", this.handleMouseUp);
      document.body.addEventListener("mousemove", this.handleMouseMove);
      document.body.addEventListener("mouseleave", this.handleMouseUp);
    }

    handleMouseUp() {
      this.box.style.cursor = "default";
      document.body.removeEventListener("mousemove", this.handleMouseMove);
      document.body.removeEventListener("mouseleave", this.handleMouseUp);
    }

    handleMouseMove(e) {
      const boxRect = this.box.getBoundingClientRect();
      this.box.style.top = `${boxRect.top + e.movementY}px`;
      this.box.style.left = `${boxRect.left + e.movementX}px`;
    }

    init() {
      this.box.addEventListener("mousedown", this.handleMouseDown);
    }
  }

  const box = new Box();
  box.init();
})();

Javascript: mobile.js

function vanishDiv() {
  document.getElementById("rightDivPopup").style.display = "none";
}

window.onload = function () {
  // find the element that you want to drag.
  var box = document.getElementById("rightDivPopup");

  /* listen to the touchMove event,
  every time it fires, grab the location
  of touch and assign it to box */

  box.addEventListener("touchmove", function (e) {
    // grab the location of touch
    var touchLocation = e.targetTouches[0];

    // assign box new coordinates based on the touch.
    box.style.left = touchLocation.pageX + "px";
    box.style.top = touchLocation.pageY + "px";
  });

  /* record the position of the touch
  when released using touchend event.
  This will be the drop position. */

  box.addEventListener("touchend", function (e) {
    // current box position.
    var x = parseInt(box.style.left);
    var y = parseInt(box.style.top);
  });
};

Leave a Reply

Most Popular

Recent Comments

%d bloggers like this: