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

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

PHPz

リリース： 2023-08-11 10:31:43

オリジナル

1638 人が閲覧しました

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

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

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

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

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

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

npm install vuedraggable --save

ログイン後にコピー

Vue.Draggable の導入:

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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 命令ループを使用してフォームフィールドのリストを表示し、各フィールドにドラッグアンドドロップ効果を追加します。

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

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

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

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

ログイン後にコピー

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

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

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

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

localStorage ツール関数の追加:

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

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

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

ログイン後にコピー

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

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

import { getFormFields, saveFormFields } from 'utils';

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

概要:

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

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

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