Как создать перетаскиваемый элемент Div с помощью JavaScript

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem

Подпишись и скачивай
любые файлы, скрипты, проекты и многое другое

MonsterTem.ru » Разное для сайта » Как создать перетаскиваемый элемент Div с помощью JavaScript

Как создать перетаскиваемый элемент Div с помощью JavaScript

13.11.2024

6 просмтотров

В этом видео мы сделаем перетаскиваемый элемент div с помощью HTML CSS и jаvascript. Надеюсь, это видео будет вам полезно. Вы можете скачать коды по ссылке, указанной ниже.

Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

В архиве находится:

Исходные файлы HTML,
Исходные файлы CSS,
Исходные файлы jаvascript,
Иконки шрифтов,
Файлы библиотеки и плагинов,

HTML КОД:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Draggable Div Element - jаvascript</title>

    <!--font awesome(for icons)-->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    />

    <!--css file-->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="draggable-elem">
      <i class="fas fa-up-down-left-right"></i>
      <p>Drag Me</p>
    </div>

    <script src="app.js"></script>
  </body>
</html>

CSS КОД:

/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(45deg, #4070f4, #adc0f3);
}

.draggable-elem {
  width: 150px;
  height: 150px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 20px;
  cursor: move;
  user-select: none;
}

.draggable-elem i {
  font-size: 40px;
}

jаvascript КОД:

let elem = document.querySelector(".draggable-elem");
let initialX = 0;
let initialY = 0;
let deviceType = "";
let isMoving = false;

//checking device type(touch based/mouse based)
let getDevicetype = () => {
  try {
    document.createEvent("TouchEvent");
    deviceType = "touchDevice";
    return true;
  } catch {
    deviceType = "mouseDevice";
    return false;
  }
};

getDevicetype();

let events = {
  mouseDevice: {
    down: "mousedown",
    move: "mousemove",
    up: "mouseup",
  },
  touchDevice: {
    down: "touchstart",
    move: "touchmove",
    up: "touchend",
  },
};

elem.addEventListener(events[deviceType].down, (e) => {
  e.preventDefault();

  //initial x and y values
  initialX = getDevicetype() ? e.touches[0].clientX : e.clientX;
  initialY = getDevicetype() ? e.touches[0].clientY : e.clientY;

  isMoving = true;
});

elem.addEventListener(events[deviceType].move, (e) => {
  if (isMoving) {
    e.preventDefault();

    //new x and y values
    let newX = getDevicetype() ? e.touches[0].clientX : e.clientX;
    let newY = getDevicetype() ? e.touches[0].clientY : e.clientY;

    elem.style.top = elem.offsetTop - (initialY - newY) + "px";
    elem.style.left = elem.offsetLeft - (initialX - newX) + "px";

    initialX = newX;
    initialY = newY;
  }
});

elem.addEventListener(events[deviceType].up, (e) => {
  e.preventDefault();
  isMoving = false;
});

elem.addEventListener("mouseleave", (e) => {
  e.preventDefault();
  isMoving = false;
});

Скачать

Категории: Разное для сайта

MonsterTem.ru

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem