Vue フォーム処理でフォームフィールドのドラッグアンドドロップ移動を実装する方法

Vue フォーム処理でフォーム フィールドのドラッグ アンド ドロップ移動を実装する方法

Vue 開発では、フォームは非常に一般的なコンポーネントであり、場合によってはフォームを変更するには フィールドをドラッグして移動できます。この記事では、Vue フォーム処理でフォーム フィールドのドラッグ アンド ドロップ移動を実装する方法と、対応するコード例を紹介します。

1. Vue.Draggable プラグインを使用する

Vue.Draggable は Vue に基づいたドラッグ アンド ドロップ プラグインで、ドラッグ アンド ドロップの実現に役立ちます。要素の影響。以下は、Vue.Draggable プラグインを使用してフォーム フィールドのドラッグ アンド ドロップ移動を実装する基本的な手順です。

1. Vue.Draggable をインストールします。

npm を使用します。または、yarn を使用してプロジェクトに Vue をインストールします。ドラッグ可能なプラグイン:

npm install vuedraggable --save

2. Vue.Draggable の導入:

Vue.Draggable を Vue コンポーネントに導入し、次のように登録します。グローバル コンポーネント:

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

3. フォーム フィールド リストの定義:

データでフォーム フィールド リストを定義します。各フィールドのデータには、フィールド名とフィールド タイプが含まれます。

data() {
  return {
    formFields: [
      { name: '用户名', type: 'text' },
      { name: '密码', type: 'password' },
      { name: '邮箱', type: 'email' },
      // ...
    ]
  }
}

4. Vue.Draggable コンポーネントを使用します :

テンプレートで Vue.Draggable コンポーネントを使用して、フォーム フィールド リストを表示し、ドラッグ アンド ドロップ効果を実現します:

<draggable v-model="formFields" group="formFieldsGroup">
  <div v-for="(field, index) in formFields" :key="index">
    <div>{{ field.name }}</div>
    <div>{{ field.type }}</div>
  </div>
</draggable>

上記のコードでは、v-for 命令ループを使用してフォーム フィールドのリストを表示し、各フィールドにドラッグ アンド ドロップ効果を追加します。

5. フォーム フィールドの並べ替え:

ユーザーがフォーム フィールドをドラッグして移動すると、Vue.Draggable はフォーム フィールド リストの並べ替えを自動的に更新します。最新のフォーム フィールドの順序は、dragend イベントをリッスンすることで取得できます。

<draggable v-model="formFields" group="formFieldsGroup" @end="onDragEnd">
  <!-- ... -->
</draggable>

methods: {
  onDragEnd() {
    console.log(this.formFields);
  }
}

onDragEnd メソッドで、最新のフォーム フィールドの順序を取得できます。

2. ドラッグ アンド 移動後に順序を保存する

上記の手順により、フォーム フィールドのドラッグ アンド ドロップ効果が得られましたが、ページが更新されると、フォーム フィールドの並べ替えが行われなくなります。フォームフィールドは初期状態に戻ります。この問題を解決するには、フォーム フィールドの順序をバックエンドまたはローカル ストレージに保存する必要があります。

ここでは、localStorage を使用してフォーム フィールドの順序を保存します。具体的な実装手順は次のとおりです:

1. localStorage ツール関数の追加:

localStorage ツール関数をプロジェクトに追加して、フォーム フィールドの順序を読み取り、保存します。 utils.js ファイルを作成し、次のコードを追加できます:

export function getFormFields() {
  return JSON.parse(localStorage.getItem('formFields')) || [];
}

export function saveFormFields(formFields) {
  localStorage.setItem('formFields', JSON.stringify(formFields));
}

2. フォーム フィールド リストを更新します:

Vue コンポーネントの作成されたライフ サイクルで、以下を読み取ります。 from localStorage フォーム フィールドの順序を取得し、フォーム フィールドのリストを更新します:

import { getFormFields, saveFormFields } from 'utils';

export default {
  // ...
  created() {
    this.formFields = getFormFields();
  },
  // ...
}

3. フォーム フィールドの順序の更新を監視します:

フォーム フィールドの順序をリアルタイムにするには、ドラッグ アンド ドロップする必要があります。完了したら、localStorage のデータを更新します。

<draggable v-model="formFields" group="formFieldsGroup" @end="onDragEnd">
  <!-- ... -->
</draggable>

methods: {
  onDragEnd() {
    saveFormFields(this.formFields);
  }
}

上記の手順により、フォーム フィールドをドラッグして移動し、順序を保存する機能を正常に実装できました。

概要:

この記事では、Vue フォーム処理で Vue.Draggable プラグインを使用して、フォーム フィールドのドラッグ アンド ドロップ移動を実装し、フォームの順序を保存する方法を紹介します。 localStorage を介してフィールドを管理します。このようにして、フォームフィールドの順序を簡単にカスタマイズでき、ユーザーエクスペリエンスと運用の柔軟性が向上します。

以上は、Vue フォーム処理でフォーム フィールドのドラッグ アンド ドロップ移動を実装する方法についての説明です。

以上がVue フォーム処理でフォームフィールドのドラッグアンドドロップ移動を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。