私がドラッグアンドドロップできるコンポーネントを作る方法を学びたいと決めたとき、私は、それがほとんど確かにサードパーティ製のライブラリを実装する必要があるいくつかの完全に複雑なrigamaroleになると仮定しました.私は、“ドラッグアンドドロップ”の概念は、独自のHTML APIを持っていることを見つけるために愉快に驚いていた、それは本当に使用するのは難しいことではない!それではどのように動作し、どのように自分のアプリケーションで使用することができますか?
HTML Drag and Drop API documentation - あなたがちょうど自分の上にドックに掘り下げたいタイプならば、あなたはここで' emを打つことができます!

何をドラッグしますか？それをドラッグ！

我々のケースでは、我々はドラッグクィーンズのリストを持って、我々はドラッグしてお気に入りをドロップして新しいリストを作成します.デフォルトでは、HTML要素はあなたが期待するように、ドラッグできません.インターネット上の任意の他の古い場所にインターネット上の任意の古いものをクリックしてドラッグすることができればそれは奇妙なことでしょう、右?
何をドラッグしますか?この場合、リストの項目をドラッグすることができます.

  const QueensList = () => {
    const queens = [
      'Divine',
      'Lady Bunny',
      'Sasha Velour',
      'Vaginal Creme Davis',
      'The Fabulous Wonder Twins'
    ]

    return (
      <ul>
        {
          queens.map((queenName) => (
            <Queen name={queenName} />
          ))
        }
      </ul>
    )
  }

  const Queen = ({ name }) => (
    <li>
      {name}
    </li>
  )

これらのアイテムをドラッグ可能にするには、以下のようにマークしなければなりません.

    const Queen = ({ name }) => (
      <li draggable='true'>{name}</li>
    )

リスト項目のテキストを他の要素にする場合は、ドラッグイベントのドラッグデータに項目を追加する必要があります.我々はこれを行うことができますsetData() ドラッグイベントのメソッドdataTransfer プロパティ、そして我々はこのonDragStart メソッド(これは推測されるかもしれませんが、ドラッグイベントが始まるとトリガされるものです).

  const onDragStart = (dragEvent) => {
    // I added a border at this point so I can 
    // clearly see what's being dragged
    dragEvent.currentTarget.style.border = '1px solid pink'
    dragEvent.dataTransfer.setData('text/plain', dragEvent.target.id)
  }

  const Queen = ({ name }) => (
    <li
      draggable='true'
      // also added a unique id so the list item can be "found"
      id={`source-${name.split(' ').join('-')}`}
      onDragStart={onDragStart}
    >
      {name}
    </li>
  )

どこでドラッグしますか。

次に、我々はドロップターゲットとして行動する別のコンポーネントを作るので、我々はどこか、これらの女王をドロップする必要がありますか?方法の新しい順序なしリストFavoriteQueens 非常に便利な名前のリスト項目“ドロップターゲット”と呼ばれるように我々は視覚的にどこにドラッグしている場所を見ることができますか?

  const FavoriteQueens = () => (
    <ul
      id='target'
      onDragEnter={onDragEnter}
      onDragOver={onDragOver}
      onDrop={onDrop}
    >
      <li>Drop Target</li>
    </ul>
  )

項目をドロップする要素については、次のようになります.

それを識別するid

つのメソッドを定義します

onDragEnter ドラッグした項目を入力したときに何が起こるかを定義するには

onDragOver 何が起こるかを定義するために、あなたはそれを推測しました

onDrop 何が起こるかを定義するために、はい、あなたは再びそれを推測しました.

For onDragEnter , 我々がする必要があるすべては、呼び出しですdragEvent.preventDefault() . これは、ドラッグイベントが発生しないようにするデフォルトの動作を防ぐためです.我々は間違いなくドラッグイベントをしたい!

      const onDragEnter = (dragEvent) => {
        dragEvent.preventDefault();
      }  

For onDragOver , 我々は同じことをして、デフォルトのふるまいを防ぎます.ちょうどFunsiesのために、我々は固体緑の境界線を加えるつもりです、それで、我々は若干の視覚的なフィードバックを得ることができて、我々がdraggableな領域の上にいるとき、わかっています.

    const onDragOver = (dragEvent) => {
        dragEvent.preventDefault();
        dragEvent.target.style.border = '1px solid green'
      }

最後にonDrop イベントは、デフォルトの動作を防ぐことから始めます.では、getData ドラッグイベントのメソッドdataTransfer プロパティを取得するプロパティをドラッグしていた.このデータを使用して新しい要素を作成し、ターゲットに追加します.この時点で、我々はまた、クリックしてドラッグし、その視覚的なフィードバックを必要としないので、両端の境界線のスタイルを削除します.最後に、我々はclearData ドラッグイベントのメソッドdataTransfer データをクリアしてください.

      const onDrop = (dragEvent) => {
        dragEvent.preventDefault();
        const data = dragEvent.dataTransfer.getData('text');
        const newElement = document.getElementById(data)
        dragEvent.target.appendChild(newElement);
        dragEvent.target.style.border = 'none'
        newElement.style.border = 'none'
        dragEvent.dataTransfer.clearData();
      }

いっしょに置きましょう!私はあなたに、ドラッグアンドドロップのコンテンツを提示することがありますApp.js かわいいリルでcreate-react-app アプリケーション!で完全なコードを表示することができますhttps://github.com/julienfitz/drag-and-drop-queens

import React from 'react'

const App = () => {
  const onDragStart = (dragEvent) => {
    // I added a border at this point so I can 
    // clearly see what's being dragged
    dragEvent.currentTarget.style.border = '1px solid pink'
    dragEvent.dataTransfer.setData('text/plain', dragEvent.target.id)
  }

  const onDragEnter = (dragEvent) => {
    dragEvent.preventDefault()
  }  

  const onDragOver = (dragEvent) => {
    dragEvent.preventDefault()
    dragEvent.target.style.border = '1px solid green'
  }

  const onDrop = (dragEvent) => {
    dragEvent.preventDefault()
    const data = dragEvent.dataTransfer.getData('text')
    const newElement = document.getElementById(data)
    dragEvent.target.appendChild(newElement)
    dragEvent.target.style.border = 'none'
    newElement.style.border = 'none'
    dragEvent.dataTransfer.clearData()
  }

  const Queen = ({ name }) => (
    <li
      draggable='true'
      // also added a unique id so the list item can be "found"
      id={`source-${name.split(' ').join('-')}`}
      onDragStart={onDragStart}
    >
      {name}
    </li>
  )

  const QueensList = () => {
    const queens = [
      'Divine',
      'Lady Bunny',
      'Sasha Velour',
      'Vaginal Creme Davis',
      'The Fabulous Wonder Twins'
    ]

    return (
      <ul>
        {
          queens.map((queenName) => (
            <Queen name={queenName} />
          ))
        }
      </ul>
    )
  }

  const FavoriteQueens = () => (
    <ul
      id='target'
      onDragEnter={onDragEnter}
      onDragOver={onDragOver}
      onDrop={onDrop}
    >
      <li>Drop Target</li>
    </ul>
  )

  return (
    <>
      <QueensList />
      <FavoriteQueens />
    </>
  )
}

export default App