Vueでドラッグ時に禁止アイコンを表示する方法-フロントエンドQ&A-php.cn

Vueでドラッグ時に禁止アイコンを表示する方法

PHPz

リリース： 2023-04-12 11:42:28

オリジナル

1461 人が閲覧しました

フロントエンド開発の人気が高まるにつれて、Web サイトやアプリケーションを作成するときに JavaScript フレームワークを使用することがますます一般的になってきています。 Vue.js は最も人気のある JavaScript フレームワークの 1 つであり、応答性の高いインタラクティブなユーザーインターフェイスを構築するための便利な方法を数多く提供します。 Vue.js でドラッグアンドドロップ機能を実装するのは非常に一般的な要件ですが、この記事では Vue.js でドラッグアンドドロップ機能を使用し、ドラッグ時に禁止アイコンを表示する方法を紹介します。

ステップ 1: Vue.draggable プラグインをインストールしてインポートする

Vue.draggable プラグインは、ドラッグアンドドロップを簡単に実装できる非常に便利なプラグインです。 Vue の機能。このプラグインをインストールするには、npm パッケージ管理ツールを使用し、次のコマンドを使用できます。

npm install vuedraggable --save

ログイン後にコピー

インストールが完了したら、Vue.draggable プラグインを Vue にインポートする必要があります。プロジェクト:

import draggable from 'vuedraggable'
Vue.component('draggable', draggable)

ログイン後にコピー

ステップ 2: Vue.draggable を使用してドラッグアンドドロップ機能を実装する

Vue.draggable プラグインが正常にインストールおよびインポートされたので、次を使用します。ドラッグアンドドロップ機能を実装します。まず、テンプレートにドラッグする要素を定義する必要があります。

<template>
  <div>
    <div class="container">
      <div class="item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
    <draggable :list="items" :options="{ handle:&#39;.handle&#39; }" @end="onEnd">
      <div class="draggable-item handle">{{ items }}</div>
    </draggable>
  </div>
</template>

ログイン後にコピー

上記のテンプレートでは、Vue.draggable プラグインを使用してドラッグアンドドロップ機能を実装しています。複数の要素を含むコンテナを定義し、各要素には「items」配列のインデックスと値が含まれます。また、コンテナ上にドラッグアンドドロップできるドラッグ可能な要素も定義します。

要素を定義した後、ドラッグアンドドロップイベントに応答するメソッドを定義する必要があります。このメソッドでは、ドラッグアンドドロップイベントがコンテナの外で発生したかどうかを確認できます。その場合は、無効化アイコンを表示できます。

methods: {
  onEnd(event) {
    const nodeList = document.querySelectorAll('.vuedraggable-container')
    const dragList = nodeList[0].getBoundingClientRect()
    const container = document.querySelector('.container').getBoundingClientRect()
    if (dragList.top < container.top || dragList.bottom > container.bottom) {
      event.preventDefault()
      console.log('Do not drop outside of the container!')
    }
  }
},

ログイン後にコピー

このメソッドでは、最初にコンテナの位置を取得し、ドラッグイベントがコンテナの外で発生したかどうかを確認します。その場合は、event.preventDefault() メソッドを使用して、ドラッグアンドドロップイベントのデフォルト動作を防止し、警告メッセージを出力します。

コードの実装に関して、最後に覚えておくべきことは、コンテナーにスタイルを追加することです。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  flex: 1;
  margin: 5px;
  padding: 10px;
  background: #eee;
  text-align: center;
  cursor: move;
}
.draggable-item {
  margin: 5px;
  padding: 10px;
  background: #7a7a7a;
  color: #fff;
  text-align: center;
  cursor: move;
}

ログイン後にコピー

ここでは、コンテナスタイルとアイテムスタイルを定義します。ドラッグ可能な要素のスタイルも追加しました。

これで Vue.js にドラッグ＆ドロップ機能が実装できました、要素をドラッグすると禁止アイコンが表示されます。これは非常に一般的な要件を実装する簡単な方法であり、Vue.js とそのプラグインを使用すると、複雑なドラッグアンドドロップ機能をより簡単に実装できます。

以上がVueでドラッグ時に禁止アイコンを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。