HTMLElement: dragenter ã¤ãã³ã

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2015å¹´7æâ©.

æ§æ

ãã®ã¤ãã³ãåã addEventListener() ã®ãããªã¡ã½ããã§ä½¿ç¨ããããã¤ãã³ããã³ãã©ã¼ããããã£ãè¨å®ããããã¾ãã

addEventListener("dragenter", (event) => {});

ondragenter = (event) => {};

ã¤ãã³ãå

DragEvent ã§ãã Event ãç¶æ¿ãã¦ãã¾ãã

ã¤ãã³ãããããã£

ä»¥ä¸ã«æããããããã£ã«å ãã¦ãè¦ªã§ãã Event ããç¶æ¿ããããããã£ãããã¾ãã

DragEvent.dataTransfer èªåå°ç¨: ãã©ãã°ï¼ããããæä½ã®éã«è»¢éããããã¼ã¿ã§ãã

ä¾

dragenter ã®ããããã¾ã¼ã³ã®ã¹ã¿ã¤ã«ä»ã

HTML

html

<div class="dropzone">
  <div id="draggable" draggable="true">ãã® div ã¯ãã©ãã°å¯</div>
</div>
<div class="dropzone" id="droptarget"></div>

CSS

css

body {
  /* ä¾ã§ã¦ã¼ã¶ã¼ãããã¹ããé¸æããã®ãé²ã */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

JavaScript

const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
  // ãã©ãã°å¯è½ãªè¦ç´ ãããããåã«å¥ã£ãã¨ãã«ãããããåã®åè£ãå¼·èª¿è¡¨ç¤ºãã
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // ãã©ãã°å¯è½ãªè¦ç´ ãããããåããé¢ããã¨ãã«ãããããåã®åè£ã®èæ¯ããªã»ãããã
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});