마우스 드래그 javascript

https://ko.quish.tv/build-draggable-slides-with-html-css

HTML CSS 및 JAVASCRIPT로 드래그 가능한 슬라이드 만들기 - 블로그

 

 

 

 

https://github.com/Basir-PD/100-Projects-HTML-CSS-JavaScript/blob/master/17%20-%20Build%20Draggable%20Slides/script.js

GitHub - Basir-PD/100-Projects-HTML-CSS-JavaScript: 100 Projects Challenge

 

 

 

 

 

<div class="container">

        <div class="cards">

          <div class="card">

            <img src="../../../images/profile-default.png" alt="" />

            <div class="card__content">

              <h1>Heading 1</h1>

              <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,

                voluptatibus!

              </p>

            </div>

          </div>

          <div class="card">

            <img src="../../../images/profile-default.png" alt="" />

            <div class="card__content">

              <h1>Heading 2</h1>

              <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,

                voluptatibus!

              </p>

            </div>

          </div>

          <div class="card">

            <img src="../../../images/profile-default.png" alt="" />

            <div class="card__content">

              <h1>Heading 3</h1>

              <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,

                voluptatibus!

              </p>

            </div>

          </div>

          <div class="card">

            <img src="../../../images/profile-default.png" alt="" />

            <div class="card__content">

              <h1>Heading 4</h1>

              <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,

                voluptatibus!

              </p>

            </div>

          </div>

          <div class="card">

            <img src="../../../images/profile-default.png" alt="" />

            <div class="card__content">

              <h1>Heading 5</h1>

              <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,

                voluptatibus!

              </p>

            </div>

          </div>

          <div class="card">

            <img src="../../../images/profile-default.png" alt="" />

            <div class="card__content">

              <h1>Heading 6</h1>

              <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum,

                voluptatibus!

              </p>

            </div>

          </div>

        </div>

 

 

 

 

 

 

    *,

*::before,

*::after {

  box-sizing: border-box;

}

body {

  font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

/* global */

img {

  width: 100%;

}

h1 {

  margin: 0.5rem 0;

}

/* container and cards */

.container {

  position: relative;

  width: 500px;

  height: 100px;

  overflow: hidden;

  cursor: grab;

  /* border-top: 10px solid #f00; */

}

.cards {

  position: absolute;

  top: 0;

  left: 0;

  display: grid;

  grid-template-columns: repeat(6, 300px);

  grid-gap: 50px;

  pointer-events: none;

  /* border-bottom: 10px solid #00f; */

}

.card {

  border: 1px solid #ccc;

  border-radius: 1rem;

  overflow: hidden;

  box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);

}

.card__content {

  color: #4e4e4e;

  padding: 1rem;

}

 

 

window.addEventListener("load", function(){

    const container = document.querySelector(".container");

    const cards = document.querySelector(".cards");

    /* keep track of user's mouse down and up */

    let isPressedDown = false;

/* x horizontal space of cursor from inner container */

let cursorXSpace;

container.addEventListener("mousedown", (e) => {

  isPressedDown = true;

  cursorXSpace = e.offsetX - cards.offsetLeft;

  container.style.cursor = "grabbing";

});

container.addEventListener("mouseup", () => {

    container.style.cursor = "grab";

});

window.addEventListener("mouseup", () => {

  isPressedDown = false;

});

container.addEventListener("mousemove", (e) => {

    if (!isPressedDown) return;

  e.preventDefault();

  cards.style.left = `${e.offsetX - cursorXSpace}px`;

  boundCards();

});

function boundCards() {

  const container_rect = container.getBoundingClientRect();

  const cards_rect = cards.getBoundingClientRect();

  if (parseInt(cards.style.left) > 0) {

    cards.style.left = 0;

  } else if (cards_rect.right < container_rect.right) {

    cards.style.left = `-${cards_rect.width - container_rect.width}px`;

  }

}

 

});