(Javascript) 마우스 관련 방법으로 필드 색상 이동

by

마우스 방식 사용

자바스크립트의 기능을 이용하여 웹 페이지의 동적 기능에서 마우스 관련 방법으로 상자에서 색상을 뽑아 다른 상자에 적용할 수 있는 기능을 구현해 봅시다.

drag.html

<!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>
      .container {
        width: 800px;
        height: 800px;
        border: 1px solid;
        display: flex;
        flex-wrap: wrap;
      }

      .box {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        box-sizing: border-box;
      }

      #item {
        width: 100%;
        height: 100%;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <!-- 드래그를 허용해 주는 속성을 true false로 설정 -->
        <div id="item" class="item" draggable="true"></div>
      </div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
  <script src="http://dbdj.m/./drag.js"></script>
</html>

drag.js

let _target = null;

// ondragstart : 드래그가 시작될떄 실행되는 이벤트
document.ondragstart = function (e) {
  if (e.target.classList.contains("item")) {
    console.log(e.target);
    _target = e.target;
    // 태그에 스타일 값을 추가
    e.target.style.backgroundColor = "red";
  }
};

// ondragend : 드래그가 끝날때 실행되는 이벤트
document.ondragend = function (e) {
  _target = null;
  // e.target이 item 클래스를 가지고 있는 태그라면
  if (e.target.classList.contains("item")) {
    // 처음에 입혀줬던 색으로 다시 변경
    e.target.style.backgroundColor = "blue";
  }
};

// ondragenter : 드래그하고 태그위에 올려졌을때 실행되는 이벤트
document.ondragenter = function (e) {
  // e.target이 box 클래스를 가지고 있고 _target이 비어있지 않을때 실행
  if (e.target.classList.contains("box") && _target !== null) {
    e.target.style.backgroundColor = "yellow";
  }
};

// ondragleave : 드래그 하는중 태그에서 빠져나갔을때 실행되는 이벤트
document.ondragleave = function (e) {
  if (e.target.classList.contains("box") && _target !== null) {
    e.target.style.backgroundColor = "transparent";
  }
};

// ondropover : 대상의 드롭 가능 여부 설정
document.ondragover = function (e) {
  if (e.target.classList.contains("box") && _target !== null) {
    // preventDefault : 브라우저에서 기본적으로 동작하는 기능을 제거
    e.preventDefault();
  }
};

// ondrop : 드래그를 하다 마우스 버튼을 때면 드롭
document.ondrop = function (e) {
  if (e.target.classList.contains("box") && _target !== null) {
    e.target.style.backgroundColor = "transparent";
    e.target.append(_target);
  }
};





문서

'추천 관련글,

– 파란색 사각형을 클릭하여 색상을 다른 상자로 드래그 앤 드롭할 수 있습니다.