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

フロントエンド開発の人気が高まるにつれて、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 サイトの他の関連記事を参照してください。