BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5 ドラッグ＆ドロップの具体的な使用方法について

2022-01-11 09:28:41

はじめに

Drag/Dropは、オブジェクトを掴んで好きな場所に配置する、非常に一般的でよく使われる操作です。H5では、ドラッグ＆ドロップは標準的な操作で、どんな要素でもドラッグすることができます。しかし! ドラッグ＆ドロップを実装するには、ドラッグ＆ドロップ属性を追加する必要があります。

H5でのドラッグ＆ドロップ属性：dragable: auto | true | false

注意：デフォルトでドラッグ可能なリンクと画像は、dragable プロパティを必要としません。

- Drag (ターゲットがドラッグされたときにイベントを発生させる)

  • dragstart - 要素がドラッグを開始したときに発生するイベントです。
  • drag - 要素がドラッグされたときに発生します。
  • dragend - 要素のドラッグが終了したときに発生します。

- ドロップ（ターゲット領域が解放されたときに発生するイベント）

  • dragenter - ドラッグされた要素がターゲット領域内に入ったときに発生します。
  • dragover - ドラッグされた要素がターゲット領域内にドラッグされたときに発生します。
  • dragleave - ドラッグされた要素がターゲット領域から離れると発生します。
  • drop - ドラッグされた要素がターゲット領域にドロップされたときに発生します。

ドラッグの手順

要素属性draggableをtrueに設定する 

  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">left area</div>
      <div class="dargable txt" id="txt1" draggable="true">movable text one</div>
      <div class="dargable txt" id="txt2" draggable="true">movable text two</div>
      <div class="dargable txt" id="txt3" draggable="true">Movable text III</div>
      <div class="dargable txt" id="txt4" draggable="true">movable text four</div>
      <div class="dargable txt" id="txt5" draggable="true">Movable text V</div>
    </div>
    <div class="right" id="right">
      <div class="txt-show">right area</div>
    </div>
  </main>

ドラッグ

dragstartイベントです。ドラッグ＆ドロップすると、dataTransferを通じてデータの保存と取り出しが行われます。1つまたは複数のデータ、1つまたは複数のデータ型を保持することができます。 

  let left = document.getElementById('left')
  let target = document.getElementById('right')
  left.addEventListener('dragstart', (event) => {
    const target = event.target;
    // The dataTransfer can be set (setData) at the start event (ondragstart) of the item dragging.
    // Drag and drop, dataTransfer property, equivalent to transporter
    // Later get it with dataTransfer.getData
    // You can get the value in the dataTransfer object at the end of the project drag.
    event.dataTransfer.setData('Text', target.id)
    // js events have a bubbling mechanism
    console.log('drag started dragging 1');
  })

dragイベント：ドラッグ＆ドロップ時に常に実行されます。 

  left.addEventListener('drag', (event) => {
    console.log('drag is dragging 2');
  })

dragend イベント: 終了 

 left.addEventListener('dragend', (event) => {
    console.log('dragend dragging is over 7');
  })

配置

dragenter、dragleaveイベント：ターゲットエリアへの進入、ターゲットエリアからの退出 

  target.addEventListener('dragenter', (event) => {
    console.log('dragenter has entered the zone 3')
  })
    target.addEventListener('dragleave', (event) => {
    console.log('dragleave left the drag area now 5')
  })

ドラッグオーバーイベント。デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可するように設定する必要がある場合、要素のデフォルトの動作をブロックする必要があります。 

  target.addEventListener('dragover', (event) => {
    // Block the default behavior
    event.preventDefault();
    console.log('dragover is dragging in the region 4')
  })

ドロップイベント：ドロップ 

  target.addEventListener('drop', (event) => {
    console.log('drop released the mouse 6')
    let drag_id = event.dataTransfer.getData('text')
    target.appendChild(document.getElementById(drag_id))
  })

フルコード 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .main {
      display: flex;
      justify-content:space-around;
    }
    .left {
      width: 300px;
      height: 500px;
      border: 1px solid lightseagreen;
      margin-right: 10px;
      /* background-color: green; */
    }
    .right {
      width: 300px;
      height: 500px;
      border: 1px solid lightseagreen;
      text-align: center;
      padding: 1px;
      /* background: red; */
    }
    .txt {
      border: 1px solid gray;
      margin: 1px;
      padding: 5px;
      cursor: move;
    }
  </style>
</head>
<body>
  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">left area</div>
      <div class="dargable txt" id="txt1" draggable="true">movable text one</div>
      <div class="dargable txt" id="txt2" draggable="true">Movable text two</div>
      <div class="dargable txt" id="txt3" draggable="true">movable text three</div>
      <div class="dargable txt" id="txt4" draggable="true">movable text four</div>
      <div class="dargable txt" id="txt5" draggable="true">Movable text V</div>
    </div>
    <div class="right" id="right">
      <div class="txt-show">right area</div>
    </div>
  </main>
  <script>
  let left = document.getElementById('left')
  let target = document.getElementById('right')
  left.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('Text', target.id)
    console.log('drag started dragging 1');
  })
  target.addEventListener('dragstart', (event) => {
    const target = event.target; 
    event.dataTransfer.setData('Text', target.id)
  })
  left.addEventListener('drag', (event) => {
    console.log('drag is dragging 2');
  })
  left.addEventListener('dragend', (event) => {
    console.log('dragend dragging is over 7');
  })
  target.addEventListener('dragenter', (event) => {
    console.log('dragenter entered the area 3')
  })
  target.addEventListener('dragover', (event) => {
    event.preventDefault();
    console.log('dragover is dragging in the region 4')
  })
  left.addEventListener('dragover', (event) => {
    event.preventDefault();
  })
  target.addEventListener('dragleave', (event) => {
    console.log('dragleave has left the dragging area 5')
  })
  target.addEventListener('drop', (event) => {
    let drag_id = event.dataTransfer.getData('text')
    target.appendChild(document.getElementById(drag_id))
  })
  left.addEventListener('drop', (event) => {
    let drag_id = event.dataTransfer.getData('text')
    left.appendChild(document.getElementById(drag_id))
  })
  </script>
</body>
</html>

ヴィネット

ドラッグスタートイベントはデータの保存と取得にdataTransferを使用し、各イベントオブジェクトはドラッグされるデータを保存するためのDataTransferオブジェクトを持っています。ドラッグスタートイベントの開始時にdataTransferを設定（setData）し、event.dataTransfer.setData()で値を設定、ドラッグ終了時にevent.dataTransfer.getData()でdataTransferオブジェクトの値を取得することが可能です。

ブラウザはデフォルトでデータ/要素を他の要素に配置することができないため、配置を許可する設定が必要な場合は、要素のデフォルトの動作を阻止する必要があります。event.preventDefault()で防止してください。

ドラッグ効果の変更は、cssのスタイルを追加することで行うことができます。例：dragSrc.classList.add('ds'). 要素内のCSSクラスを追加、削除、トグルするには、classListを使用します。classListプロパティは読み取り専用ですが、add()メソッドやremove()メソッドを使って変更することが可能です。

appendChild()メソッドを使用して、ある要素を他の要素に削除します。

HTMLドラッグ＆ドロップAPI

データ転送(DataTransfer)

HTML DOM の appendChild() メソッド

HTML DOM addEventListener() メソッド

HTML5のドラッグ＆ドロップについては、この記事がすべてです。HTML5のドラッグ＆ドロップについては、過去の記事を検索していただくか、引き続き以下の記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します