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

Html5ネイティブのドラッグ＆ドロップ関連イベント紹介と基本的な実装方法

2022-01-11 19:18:21

会社のプロジェクトで、異なるタスクリスト間でタスクカードをドラッグ＆ドロップして、タスクのカテゴリーを変更する必要があります。そこで、関連記事を調べ、少し勉強してみました。その結果、以下のようになりました。

ドラッグ＆ドロップの実装

主な用途は、H5に搭載されているドラッグ＆ドロップの効果です。実はフロントエンド部分はReactで書かれているのですが、H5を使って実装して初めて、Dan Abramov氏がネイティブのドラッグ＆ドロップメソッドをカプセル化したReact-DnDコンポーネントを用意していることを知りました。ちょっとだけ、とても強く勉強になりました。この後、シェアする記事を書きますね。

関連イベントの定義と使い方

1つのプロパティと6つのイベントを含んでいます。イベントはすべてH5ネイティブイベントである。

属性

  • draggable: 通常のdivはドラッグできません。要素をドラッグ可能に設定するには、draggable="true" という属性を追加する必要があります。

イベント

  • ondragstart: 要素をドラッグしたときのイベント。ドラッグされるときに呼び出される。
  • ondrag: ドラッグエレメントのイベント。要素がドラッグされるときに呼び出される。
  • ondragend: ドラッグエレメントイベント。ドラッグされた要素が配置されたときに呼び出される。
  • ondragenter: ドラッグエレメントのイベントです。ドラッグされた要素が配置された要素の有効範囲に入るときに呼び出されます。
  • ondragover: 配置された要素のイベント。ドラッグされた要素が配置された要素の有効領域と重なったときに呼び出される
  • ondragleave: 配置された要素のイベント。ドラッグされた要素が配置された要素の有効範囲から外れたときに呼び出されます。
  • ondrop: ドロップエレメントのイベント。ドラッグした要素がドロップ要素に配置されたときに呼び出される。

基本的なコードの実装

要素のドラッグに関連するイベントを実装するコードは以下の通りです。 

function handleOndragstart() {
    /*
    This event is called when the dragged element is dragged. It is typically used to get a unique identifier for the dragged element, such as an id, etc. To facilitate the positioning of the element during subsequent data updates
     */
}

function handleOndragend() {
    /*
    This event is called when the dragged element is placed. Generally used for resetting variable operations
     */
}

function handleOndrag() {
    /*
    This event is implemented according to personal requirements
     */
}

ドラッグ＆ドロップ要素のH5コードは以下の通りです。 

<div 
     draggable="true" 
     ondragstart="handleOndragstart()" 
     ondrag="handleOndarg()" 
     ondragend="handleOndragend()"
     >
    The element is a drag and drop element
</div>

配置された要素に関連するイベントを実装するコードは次のとおりです。 

/*
By default, data/elements cannot be placed into other elements. If we want to implement this feature, we need to prevent the default handling of the element. We can do this by calling the event.preventDefault() method to implement the ondragover event.
 */
function handleOndragover(event) {
    event.preventDefault();
    /*
    Do your function handling here
     */
}

function handleOndragenter(event) {
    event.preventDefault();
    /*
    Do your function processing here
     */
}

function handleOndragleave(event) {
    event.preventDefault();
    /*
    Do your function processing here
     */
}

function handleOndrop(event) {
    event.preventDefault(); // Clear the default event. drop event's default behavior is to open as a link
    /*
    Generally interacts with the backend for data updates in this event, i.e. when the drag element is dropped
     */
}

placement要素のH5コードは以下の通りです。 

<div 
     ondragenter="handleOndragenter(event)" 
     ondragover="handleOndragover(event)" 
     ondragleave="handleOndragleave(event)" 
     ondrop="handleOndrop(event)
     >
    This element is a drop element
</div>

インスタンス

次のコードでは、2つのdivの間で子要素をドラッグ＆ドロップできるようにします。 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>drag-and-drop implementation</title>
    <style type="text/css">
      .parent {
        display: flex;
        width: 450px;
        justify-content: space-around;
      }
      .container {
        height: 300px;
        width: 200px;
        background-color: rgba(255, 255, 0, 0.3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .box {
        width: 100px;
        height: 50px;
        background-color: rgba(255, 255, 255, 1);
      }
    </style>
    <script type="text/javascript">
      function handleOndragstart(event) {
        // Set the data to be dragged, which can be simply interpreted as setting the value of Box to the id of the element being dragged. here it is "Box"
        event.dataTransfer.setData("Box", event.target.id);
      }
      function handleOndragover(event) {
        event.preventDefault();
      }
      function handleOndrop(event) {
          // Called when the dragged element is dropped
        event.preventDefault();
        var data = event.dataTransfer.getData("Box");
        // Append the dragged element to the repositioned element
        event.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>

  <body>
    <div class="parent">
      <div
        class="container"
        ondragover="handleOndragover(event)"
        ondrop="handleOndrop(event)"
      >
        <div
          class="box"
          draggable="true"
          id="Box"
          ondragstart="handleOndragstart(event)"
        ></div>
      </div>
      <div
        class="container"
        ondragover="handleOndragover(event)"
        ondrop="handleOndrop(event)"
      ></div>
    </div>
  </body>
</html>

最後

とりあえずこれだけ書いておきましょう。上記の例もH5で書かれており、Reactを使って実装されているわけではありません。後日、React版の簡単なデモを書いてみようと思います。また、これは私の最初の共有記事と考えるべきで、それを貫き通せればと思います。

参考リンク
https://www.jb51.net/article/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2

Html5ネイティブドラッグ＆ドロップ関連イベントの紹介と基本的な実装についてこの記事は、より関連するHtml5ネイティブドラッグ＆ドロップの内容は、スクリプトホームの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトホームをサポートして願っています！.

関連

最新

おすすめ

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