Vue を使用して、折りたたみ可能なドラッグ アンド ドロップによる並べ替え効果を実現するにはどうすればよいですか?

フロントエンド開発では、折りたたみ可能およびドラッグ アンド ドロップによる並べ替え効果を実現することが一般的な要件です。この機能は、Vue フレームワークを使用して簡単かつ迅速に実装できます。この記事では、Vue を使用して、折りたたみ機能やドラッグ アンド ドロップによる並べ替え効果を実現し、ページをより美しく、使いやすくする方法を紹介します。

1. 折り畳み可能なエフェクト

1.1 HTML と CSS コードを記述する

まず、以下に示すように、HTML で折り畳む必要がある要素を作成します。 # #次に、CSS を使用してこれらの要素のスタイルを設定します。

<div class="collapse">
  <div class="header">折叠标题</div>
  <div class="content">折叠内容</div>
</div>

ここでは、折りたたみボックスに境界線を追加し、背景色とカーソルのスタイルを設定します。同時に、タイトルをクリックしたときにコンテンツの表示/非表示を切り替えるクリックイベントをタイトルに追加しました。

1.2 Vue コンポーネントの追加

次に、折りたたみ可能なエフェクト用の Vue コンポーネントを作成する必要があります。まず、Vue をインポートする必要があります:

.collapse {
  border: 1px solid #ccc;
}

.header {
  background-color: #eee;
  cursor: pointer;
  padding: 10px;
}

.content {
  padding: 10px;
}

次に、Vue.component() メソッドを使用してコンポーネントを作成できます:

import Vue from 'vue';

ここでは、 'collapse' というコンポーネントを作成します。ヘッダーとコンテンツという 2 つの属性を受け入れることができます。 data() メソッドを使用して、初期値が false である show 変数を作成し、折りたたみボックスの内容が非表示であることを示しました。次に、toggle() メソッドを使用して、タイトルがクリックされたときに show 変数の値を切り替えます。最後に、template 属性を使用してコンポーネントの HTML 構造を定義します。

1.3 HTML でのコンポーネントの使用

最後に、このコンポーネントを HTML で使用するだけです。

Vue.component('collapse', {
  props: {
    header: String,
    content: String,
  },
  data() {
    return {
      show: false, // 初始状态为隐藏
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
  template: `
    <div class="collapse">
      <div class="header" @click="toggle">{{ header }}</div>
      <div class="content" v-show="show">{{ content }}</div>
    </div>
  `,
});

ここでは、 header と content の 2 つの属性をコンポーネントに渡します。これは、コンポーネント内で折りたたみボックスのタイトルとコンテンツとしてそれぞれ表示されます。タイトルをクリックすると、内容が展開または折りたたまれます。

2. ドラッグ アンド ドロップの並べ替え効果

2.1 HTML および CSS コードの記述

まず、ドラッグ アンド ドロップの効果を実現する方法を見てみましょう。まず、以下に示すように、HTML 内で並べ替える必要がある要素を作成します。

<collapse header="折叠标题" content="折叠内容"></collapse>

次に、CSS スタイルを使用してこれらの要素のスタイルを設定します。

<div id="app">
  <div class="sortable">
    <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
  </div>
</div>

ここでは、要素が自動的に折り返されるようにフレックス レイアウトを使用します。各要素には灰色の背景と境界線があり、マウスをその上に置くと、カーソルのスタイルが「グラブ」に変わり、ドラッグできることを示します。

2.2 Vue コンポーネントの追加

ドラッグ アンド ドロップによる並べ替え効果を実現するには、Vue コンポーネントも追加する必要があります。同様に、Vue をインポートします:

.sortable {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}

.item {
  background: #eaeaea;
  border: 1px solid #ccc;
  cursor: grab;
  margin: 10px;
  padding: 10px;
  text-align: center;
  width: 100px;
}

次に、Vue.component() メソッドを使用してコンポーネントを作成します:

import Vue from 'vue';

ここでは、「sortable」というコンポーネントを作成します。 data() メソッドを使用して、並べ替える必要がある要素を含む items 配列を作成します。次に、コンポーネントがロードされた後に、mounted() メソッドを使用して Sortable ライブラリを初期化し、それをコンポーネントのルート要素に適用します。 template 属性を使用してコンポーネントの HTML 構造を定義します。

ドラッグの最後に、onEnd() メソッドを使用して項目配列を更新します。 splice() メソッドを使用して items 配列から要素を削除して返し、 splice() メソッドを使用して要素を新しい位置に挿入します。

2.3 HTML でのコンポーネントの使用

最後に、HTML でこのコンポーネントを使用します。

Vue.component('sortable', {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
      ],
    };
  },
  mounted() {
    const sortable = new Sortable(this.$el, {
      animation: 150,
      onEnd: event => {
        const item = this.items.splice(event.oldIndex, 1)[0];
        this.items.splice(event.newIndex, 0, item);
      },
    });
  },
  template: `
    <div class="sortable">
      <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
    </div>
  `,
});

これにより、ドラッグ可能な要素とその順序付けの効果が表示されます。

概要

この記事では、Vue を使用して折りたたみ可能なドラッグ アンド ドロップによる並べ替え効果を実現する方法を紹介しました。これらのテクノロジーは、ページのデザインをより美しく、使いやすくするのに役立ちます。これらのテクニックは、個人プロジェクトと商業プロジェクトの両方に非常に役立ちます。この記事が、Vue を使用してこれらのインタラクティブな効果を実現し、それらを将来のプロジェクトに適用してページをより魅力的で使いやすくする方法をより深く理解するのに役立つことを願っています。

以上がVue を使用して、折りたたみ可能なドラッグ アンド ドロップによる並べ替え効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。