Vue で HTML 5 ドラッグ アンド ドロップ API を使用する方法

vue カンバンボードを作成する

<テンプレート> <div></div> </テンプレート>
<スクリプト>
エクスポートデフォルト{
 名前: 'アプリ'、
 コンポーネント: {},
};
</スクリプト>
<スタイル></スタイル>

<ヘッド>
 <メタ文字セット="utf-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅,初期スケール=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="外部 nofollow" >
 <link rel="スタイルシート" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="外部 nofollow" 
 整合性="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" クロスオリジン="匿名">
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>

<テンプレート>
 <div class="カード">
 <div class="card-body">サンプルカード</div>
 </div>
</テンプレート>
<スクリプト>
デフォルトをエクスポートします {};
</スクリプト>
<スタイルスコープ>
div.カード{
 下部マージン: 15px;
 ボックスシャドウ: 0 0 5px #cccccc;
 遷移: すべての緩和 300 ミリ秒;
 背景: #fdfdfd;
}
div.card:hover {
 ボックスシャドウ: 0 0 10px #aaaaaa;
 背景: #ffffff;
}
</スタイル>

<テンプレート>
 <divクラス="">
 <ボタン
  クラス="btn btn-sm btn-info w-100"
  v-if="!inAddMode"
  @click="inAddMode = true"
 >
  カードを追加
 </ボタン>
 <form action="#" class="card p-3" ref="form" v-else>
  <div class="フォームグループ">
  <入力
   タイプ="テキスト"
   名前="タイトル"
   id="タイトル"
   クラス="フォームコントロール"
   placeholder="何か興味深いもの..."
   v-model="カードデータ"
  />
  </div>
  <div class="d-flex justify-content-center">
  <button type="submit" class="btn w-50 btn-primary mr-3">保存</button>
  <button type="reset" class="btn w-50 btn-danger">
   キャンセル
  </ボタン>
  </div>
 </フォーム>
 </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 データ（） {
 戻る {
  inAddMode: false、
  カードデータ: ''、
 };
 },
 メソッド: {},
};
</スクリプト>
<スタイル></スタイル>

<テンプレート>
 <div class="col-md-3 カード列" ref="列">
 <ヘッダークラ​​ス="カードヘッダー">
  <h3 class="col">列名</h3>
 </ヘッダー>
 <div class="カードリスト"></div>
 </div>
</テンプレート>
<スクリプト>
デフォルトをエクスポートします {};
</スクリプト>
<スタイルスコープ>
div.列{
 パディング: 0;
 パディング下部: 15px;
 マージン: 0 15px;
 ボックスシャドウ: 0 0 10px #cccccc;
}
div.カードリスト{
 パディング: 0 15px;
}
ヘッダー {
 下マージン: 10px;
}
ヘッダー h3 {
 テキスト配置: 中央;
}
</スタイル>

<!-- HTML で要素をドラッグ可能にする -->
<div draggable="true">これは HTML 内のドラッグ可能な div です</div>

<スクリプト>
// JavaScript で要素をドラッグ可能にする
div は document.querySelector('div') に格納されます。
div.draggable = true;
</スクリプト>

<!-- セクションをドロップ可能にする -->
<セクションクラス="セクション"></セクション>
<スクリプト>
セクション = document.querySelector('.section');
section.addEventListener('dragover', (e) => {
 e.preventDefault();
});
</スクリプト>

// アプリ.vue
<テンプレート>
 <div class="コンテナ流体">
 <h2 class="m-5">
  Vue カンバンボード
 </h2>
 <div class="行の中央揃え">
  <コラム
  v-for="(列、インデックス) 列内"
  :column="列"
  :key="インデックス"
  />
 </div>
 </div>
</テンプレート>
<スクリプト>
'./components/Column' から列をインポートします。
エクスポートデフォルト{
 名前: 'アプリ'、
 コンポーネント:
 カラム、
 },
 データ（） {
 戻る {
  列: [
  {
   名前: 'TO-DO'、
   カード:
   {
    値: '朝食を準備する'、
   },
   {
    価値: '市場に行く'、
   },
   {
    値: '洗濯をする'、
   },
   ]、
  },
  {
   名前: '進行中'、
   カード: [],
  },
  {
   名前: '完了'、
   カード: [],
  },
  ]、
 };
 },
};
</スクリプト>
<スタイル>
h2 {
 テキスト配置: 中央;
}
</スタイル>

// 列.vue
<テンプレート>
 <div class="col-md-3 カード列" ref="列">
 <header class="カードヘッダー">
  <h3 class="col">{{ 列名 }}</h3>
  <カードを追加 />
 </ヘッダー>
 <div class="カードリスト">
  <Card v-for="(card, index) in column.cards" :key="index" :card="card" />
 </div>
 </div>
</テンプレート>
<スクリプト>
'./Card' から Card をインポートします。
'./AddCard' から AddCard をインポートします。
エクスポートデフォルト{
 名前: '列',
 コンポーネント:
 カード、
 カードを追加、
 },
 小道具: {
 カラム： {
  タイプ: オブジェクト、
  必須: true、
 },
 },
};
</スクリプト>

...

// カード.vue
<テンプレート>
 <div class="カード" ref="カード">
 <div class="card-body">{{ car​​d.value }}</div>
 </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 名前: 'カード',
 小道具: {
 カード: {
  タイプ: オブジェクト、
  必須: true、
 },
 },
};
</スクリプト>

// カード.vue
<スクリプト>
エクスポートデフォルト{
 名前: 'カード',
 プロパティ: {...},

 マウント() {
 this.setDraggable();
 },

 メソッド: {
 ドラッグ可能な設定() {
  // カード要素を取得します。
  const カード = this.$refs.card;
  カードのドラッグ可能 = true;
  // イベント リスナーを設定します。
  card.addEventListener('dragstart', this.handleDragStart);
  card.addEventListener('dragend', this.handleDragEnd);
 },
 },
</スクリプト>

// カード.vue
<スクリプト>
エクスポート const CardDataType = 'text/x-kanban-card';

エクスポートデフォルト{
...
 メソッド: {
 setDraggable() {...},
 handleDragStart(イベント) {
  イベントの dataTransfer を定数に設定します。
  // プロパティから取得したカードの値をデータとして設定します。
  dataTransfer.setData(CardDataType、th​​is.card.value);
  dataTransfer.effectAllowed = '移動';
  // カードが所定の位置にないことを示す視覚的な合図を追加します。
  イベントターゲットスタイルの不透明度 = 0.2;
 },
 handleDragEnd(イベント) {
  // カードをドロップしたときに不透明度を通常に戻します。
  イベントターゲットスタイルの不透明度 = 1;
 }
 }
}
</スクリプト>

// 列.vue
<テンプレート>...</テンプレート>
<スクリプト>
'./Card' から Card { CardDataType } をインポートします。
'./AddCard' から AddCard をインポートします。
エクスポートデフォルト{
 名前: '列',
 コンポーネント: {...},
 プロパティ: {...},
 マウント() {
 これをenableDrop();
 },
 メソッド: {
 ドロップを有効にする() {
  定数列 = this.$refs.column;
  column.addEventListener('dragenter', this.handleDragEnter);
  column.addEventListener('dragover', this.handleDragOver);
  column.addEventListener('drop', this.handleDrop);
 },
 /**
  * @param {DragEvent} イベント
  */
 handleDragEnter(イベント) {
  イベントデータ転送タイプに[CardDataType]が含まれる場合
  // カードのみを処理します。
  イベントをデフォルトにしない();
  }
 },
 handleDragOver(イベント) {
  // 移動効果を作成します。
  event.dataTransfer.dropEffect = '移動';
  イベントをデフォルトにしない();
 },
 /**
  * @param {DragEvent} イベント
  */
 ハンドルドロップ(イベント) {
  const データ = event.dataTransfer.getData(CardDataType);
  // カード移動イベントを発行します。
  this.$emit('cardMoved', データ);
 },
 },
};
</スクリプト>

// アプリ.vue

<テンプレート>
 <div class="コンテナ流体">
 ...
 <div class="行の中央揃え">
  <コラム
  v-for="(列、インデックス) 列内"
  :column="列"
  :key="インデックス"
  @cardMoved="カードを列に移動($event、列)"
  />
 </div>
 </div>
</テンプレート>

<スクリプト>
'./components/Column' から列をインポートします。
エクスポートデフォルト{
 名前: 'アプリ'、
 コンポーネント: {...},
 データ（） {
 戻る {...}
 },
 メソッド: {
 カードを列に移動(データ、新しい列) {
  const 以前の列 = this.columns.find(列 => {
  // 列内のすべてのカードの値を取得します。
  const cardValues ​​= column.cards.map((card) => card.value);
  cardValues.includes(データ) を返します。
  })
  // 前の列からカードを削除します。
  以前の列.カード = 以前の列.カード.フィルター(
  (カード) => カード.値 !== データ
  );
  // 新しい列にカードを追加します。
  newColumn.cards.push({ 値: データ });
 },
 },
}
</スクリプト>

<テンプレート>
 <divクラス="">
 <ボタン
  クラス="btn btn-sm btn-info w-100"
  v-if="!inAddMode"
  @click="inAddMode = true"
 >
  カードを追加
 </ボタン>
 <フォーム
  アクション="#"
  クラス="カード p-3"
  @submit.prevent="送信処理"
  @reset="ハンドルリセット"
  ref="フォーム"
  v-else
 >
  ...
 </フォーム>
 </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 データ（） {
 戻る {...};
 },
 メソッド: {
 ハンドル送信() {
  if (this.cardData.trim()) {
  this.cardData = '';
  this.inAddMode は false です。
  this.$emit('newcard', this.cardData.trim());
  }
 },
 ハンドルリセット() {
  this.cardData = '';
  this.inAddMode は false です。
 },
 },
};
</スクリプト>

<テンプレート>
 <div class="col-md-3 カード列" ref="列">
 <header class="カードヘッダー">
  <h3 class="col">{{ 列名 }}</h3>
  <AddCard @newcard="$emit('newcard', $event)"></AddCard>
 </ヘッダー>
 ...
</テンプレート>
...

// アプリ.vue

<テンプレート>
 <div class="コンテナ流体">
 ...
 <div class="行の中央揃え">
  <コラム
  v-for="(列、インデックス) 列内"
  :column="列"
  :key="インデックス"
  @cardMoved="カードを列に移動($event、列)"
  @newcard="handleNewCard($event, 列)"
  />
 </div>
 </div>
</テンプレート>

<スクリプト>
'./components/Column' から列をインポートします。
エクスポートデフォルト{
 名前: 'アプリ'、
 コンポーネント: {...},
 データ（） {
 戻る {...}
 },
 メソッド: {
 カードを列に移動(データ、新しい列) {...},
 handleNewCard(データ、列) {
  // 列に新しいカードを追加します。
  column.cards.unshift({ 値: データ });
 },
 },
};
</スクリプト>