ドラッグアンドドロップ機能付きの Vue.js ショッピングカートを実装する

はじめに

このプロジェクトでは、ドラッグアンドドロップ機能付きのオンラインショッピングカートを実装する方法を学びます。このプロジェクトの目的は、Vue.js の概念と Web ブラウザが提供するドラッグアンドドロップ API を理解して適用することを支援することです。

👀 プレビュー

オンラインショッピングカートのデモ

🎯 タスク

このプロジェクトでは、以下を学びます。

プロジェクトをセットアップし、提供されたファイルと構造に慣れ親しむ方法。
オンラインショッピングカートのドラッグアンドドロップ機能を実装し、ユーザーが商品をカートに追加できるようにする方法。
商品数、商品詳細、合計金額などのショッピングカート情報を表示する方法。
オンラインショッピングカートをテストし、機能が期待通りに機能することを確認する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Vue.js を使用して Web アプリケーションを構築する。
Web ブラウザの組み込み API を使用してドラッグアンドドロップ機能を実装する。
動的なデータを表示し、ユーザーの操作に基づいてユーザーインターフェイスを更新する。
アプリケーションをコンポーネントに整理することで、クリーンで保守可能なコードを書く。

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── images
│   ├── book.jpeg
│   ├── box.jpeg
│   ├── paper.jpeg
│   ├── trolley.jpeg
│   └── tv.jpg
├── index.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── trolley.vue

その中で：

images フォルダはページに必要な商品画像を提供します。
index.css はスタイルファイルです。
index.html はメインページです。
js/vue.min.js と js/http-vue-loader.js は Vue ライブラリに関連するファイルです。
trolley.vue は完成させる必要のあるコンポーネントファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

ドラッグアンドドロップ機能を実装する

このステップでは、オンラインショッピングカートのドラッグアンドドロップ機能を実装します。

trolley.vue ファイルを開きます。
data() 関数の中で、商品情報を含む goods 配列が見えます。このデータは、「商品一覧」セクションに商品を表示するために使用されます。
methods セクションに以下のコードを追加します。

methods: {
  dragstart(e, good) {
    e.dataTransfer.setData("name", good.name);
    e.dataTransfer.setData("price", good.price);
  },
  dragover(e) {
    e.preventDefault();
  },
  drop(e) {
    const { bought } = this;
    const name = e.dataTransfer.getData("name");
    const price = e.dataTransfer.getData("price");
    bought.push({ name, price: Number(price) });
  }
}

解説：

dragstart メソッドは、ユーザーが商品をドラッグし始めたときに呼び出されます。商品名と価格を dataTransfer オブジェクトに設定します。これは、後で drop メソッドでアクセスできます。
dragover メソッドは、ドラッグされたアイテムがショッピングカートの上にあるときに呼び出されます。ブラウザの既定の動作を防止します。これは、drop イベントが機能するために必要です。
drop メソッドは、ユーザーがドラッグされたアイテムをショッピングカートにドロップしたときに呼び出されます。dataTransfer オブジェクトから商品名と価格を取得し、商品を bought 配列に追加します。

computed セクションに以下のコードを追加します。

computed: {
  totalPrice() {
    const { bought } = this;
    var sum = 0;
    for (key in bought) {
      sum += bought[key].price;
    }
    return sum;
  },
  goodsDetail() {
    const { bought } = this;
    const names = [];
    const goods = [];
    for (key in bought) {
      names.push(bought[key].name);
    }
    function getRepeatNum() {
      return names.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, {});
    }
    for (key in getRepeatNum()) {
      goods.push(`${key}*${getRepeatNum()[key]}`);
    }
    return goods.join(" ");
  }
},

解説：

totalPrice コンピュートドプロパティは、ショッピングカート内の商品の合計金額を計算します。
goodsDetail コンピュートドプロパティは、ショッピングカート内の商品の詳細を生成し、商品名と数量を表示します。

HTML にドラッグアンドドロップイベントをバインドする

このステップでは、ドラッグアンドドロップイベントを div タグにバインドする必要があります。

trolley.vue ファイルの template セクションで、<div class="good-list"> 要素を探します。
<div class="good-list"> 要素を以下のコードに変更します。

<div class="good-list">
  <div
    v-for="good in goods"
    :key="good.name"
    class="good"
    draggable="true"
    @dragstart="dragstart($event, good)"
  >
    <img :src="good.cover" draggable="false" />
    <span>{{ good.name }}</span>
    <span>$ {{ good.price }}</span>
  </div>
</div>

<div class="trolley" id="trolley"> 要素を探します。
<div class="trolley" id="trolley"> 要素を以下のコードに変更します。

<div id="trolley" class="trolley" @dragover="dragover" @drop="drop">
  <span id="bought" class="bought" v-if="bought.length!== 0"
    >{{ bought.length }}</span
  >
  <img src="./images/trolley.jpeg" />
</div>

オンラインショッピングカートをテストする

trolley.vue ファイルを保存します。
ページを更新して、オンラインショッピングカートの初期状態を確認します。
商品画像をドラッグしてショッピングカートにドロップしてみます。
ショッピングカートの変化を観察します。商品数、商品詳細、合計金額などです。
機能が期待通りに機能することを確認します。

最終的な実装結果は以下の通りです。

画像の説明

おめでとうございます！提供されたベースプロジェクトとドラッグアンドドロップ機能を使用して、オンラインショッピングカートを正常に実装しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。