드래그로 이동할 수 있는 dialog 태그를 싹둑 만들기

<dialog> 태그란?

<dialog> : 대화 요소 - MDN web docs
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / cs / u b / HTML / 에멘 t / ぢ 아 g

제대로 움직이는 것은 Chrome과 Chrome 기반 Edge뿐입니다.
사용은 어렵지만, 사내 시스템 등에서 사용하는 분에는 좋을까-라는 느낌이군요.

우선 대화 상자를 표시하는 코드

<dialog id="dialog">
  <h1>hello</h1>
</dialog>
<button id="show">show</button>

<script>
const showBtn = document.querySelector('#show');
const dlg = document.querySelector('#dialog');

showBtn.addEventListener('click', () => {
  dlg.showModal()
});
</script>

dialog要素 는 기본적으로 숨겨집니다.
화면에는 show 버튼 밖에 표시되지 않네요.




dialog要素는 js와 함께 사용되며 dialog要素.showModal()로 표시 할 수 있습니다.

모달 테두리는 기본값입니다.
모달의 배경이 약간 회색입니다.
다음은 스타일을 괴롭히자.

스타일을 만지다

<style>
/* モーダル */
dialog {
  border: none;
  border-radius: 10px;
}

/* モーダルの背景 */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

테두리를 지우고 둥근 둥지를 넣어 보았습니다.dialog::backdrop 는 모달 배경의 의사 요소입니다. 반투명 검정을 설정해 보았습니다.

드래그할 수 있도록

<style>
/* モーダル */
dialog {
  border: none;
  border-radius: 10px;
}

/* モーダルの背景 */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* モーダル内のテキストとかを選択不可にする */
dialog * {
  user-select: none;
}
</style>
<dialog id="dialog" draggable="true">
  <h1>hello</h1>
</dialog>
<button id="show">show</button>
<script>
const showBtn = document.querySelector('#show');
const dlg = document.querySelector('#dialog');

showBtn.addEventListener('click', () => {
  dlg.showModal()
});

/**
 * モーダルのどこをつかんで移動を開始したか保存する用
 */
let mouse = {
  x: 0,
  y: 0,
};

/**
 * モーダルのどこをつかんで移動を開始したか保存する
 * ドラッグ時についてくる半透明の要素を空のdivにして消す
 */
dlg.addEventListener('dragstart', evt => {
  mouse.y = dlg.offsetTop-evt.pageY;
  mouse.x = dlg.offsetLeft-evt.pageX;
  evt.dataTransfer.setDragImage(document.createElement('div'), 0, 0);
});

/**
 * ドラッグ時の座標を
 */
dlg.addEventListener('drag', evt => {
  if (evt.x === 0 && evt.y === 0) return;
  const top = evt.pageY + mouse.y;
  const left = evt.pageX + mouse.x;
  const right = window.outerWidth - evt.pageX;
  dlg.style.top = top + 'px';
  dlg.style.left = left + 'px';
  dlg.style.right = right + 'px';
});

/**
 * モーダルのどこをつかんで移動を開始したかをリセットする
 */
dlg.addEventListener('dragend', evt => {
  mouse = {
    x: 0,
    y: 0,
  };
});
</script>

이런 식으로 이동할 수 있습니다.
드래그 시작한 마우스의 위치를 ​​설정하지 않으면 마우스의 위치가 모달의 왼쪽 상단이 됩니다.

또한 dialog要素는 기본적으로

dialog {
  left: 0;
  right: 0;
  position: absolute;
  ...他
}

가 들어 있기 때문에 left와 right를 모두 설정합니다.
evt.dataTransfer.setDragImage(document.createElement('div'), 0, 0); 는 없어도 좋지만 반투명 요소가 붙어 있습니다.

오시마

라이브러리도 아무것도 없이 모달 표시할 수 있는 것은 편하네요.
덧붙여서 dialog要素 는 form要素 를 내포해 사용하는 것이 많습니다.

<dialog>
  <form method="dialog">
    <button value="ok">OK</button>
  </form>
</dialog>
<script>
document.querySelector('dialog').addEventListener('close', () => {
  console.log(
    document.querySelector('dialog').returnValue
  );
});
</script>

method="dialog" 를 설정하고 submit 하면 모달이 숨겨집니다.
OK 버튼을 누르면 ok라는 문자열을 js로받을 수 있습니다.

여러분도 사용해 보는 것은 어떻습니까?