Vue ドラッグ アンド ドロップのシンプルな実装

 <MyShuttle:dataOrigin='[
          {
            名前:「データ001」
            ID: "番号 001",
          },
          {
            名前:「データ002」
            ID: "番号 001",
          },
          {
            名前:「データ003」
            ID: "番号 001",
          }]' 
          
      :スペース='[{
            名前:"右001",
            ID:"右 001",
            }]' />

フォロー
// ブラウザがデフォルトでこの動作をしないようにします。そうしないと、クロスが表示され、見栄えが悪くなります。

@dragleave.stop="dragleave($event, 'main')"

@dragend.stop="dragEnd($event, item)"

<テンプレート>
  <div class="MyShuttle">
    <div class="MyShuttleLeft">
      <div class="title">データソース</div>
      <div class="dataBox" @dragleave.stop="dragleave($event, 'main')">
        <div v-for="(item, i) in dataOrigin" :key="i" class="dataList" draggable @dragenter.prevent
          @dragover.prevent @dragstart.stop="dragstart($event, item)"
          @dragend.stop="dragEnd($event, item)">
          {{item.Name}}
        </div>
      </div>
    </div>
    <div class="MyShuttleCenter"></div>
    <div class="MyShuttleRight">
      <div class="title">データソース</div>
      <div ref="MyShuttleRight" class="dataBox">
        <div v-for="(item, i) in spaceList" :key="i" class="dataList" draggable @dragenter.prevent
          @dragover.prevent>
          {{item.Name}}
        </div>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前： ''、
  コンポーネント: {},
  小道具: {
    データオリジン: {
      タイプ: 配列
    },
    空間： {
      タイプ: 配列
    }
  },
  データ（） {
    戻る {
      スペースリスト: this.space,
      ドラッグステータス: false
    }
  },
  計算: {},
  時計： {}、
  作成された() { },
  マウント() { },
  メソッド: {
    ドラッグリーブ(e, アイテム) {
      // コンソール.log(e, アイテム)
      if (item === 'main') {
        this.isDragStatus = true
      } それ以外 {
        this.isDragStatus = false
      }
      // コンソールログ(this.isDragStatus)
    },
    ドラッグスタート(e, アイテム) {
      // コンソール.log(e, アイテム)
    },
    ドラッグ終了(e, 項目) {
      const top = this.$refs.MyShuttleRight.getBoundingClientRect().top
      const 右 = this.$refs.MyShuttleRight.getBoundingClientRect().右
      定数 bottom = this.$refs.MyShuttleRight.getBoundingClientRect().bottom
      const 左 = this.$refs.MyShuttleRight.getBoundingClientRect().左
      console.log(上、右、下、左)
      console.log(e.clientX, e.clientY, アイテム)
      if (this.isDragStatus && e.clientY > 上 && e.clientY < 下 && e.clientX > 左 && e.clientX < 右) {
        this.spaceList.push(アイテム)
        console.log(this.spaceList.indexOf(item))
      }
    }
  }
}
</スクリプト>

<スタイル スコープ lang="scss">
.マイシャトル{
  幅: 100%;
  高さ: 308px;

  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
  // 左と右のボックスの共通スタイル。MyShuttleLeft、
  .MyShuttleRight {
    境界線: 1px 実線 #dddddd;
    境界線の折りたたみ: 折りたたみ;
    。タイトル {
      ボックスのサイズ: 境界線ボックス;
      幅: 100%;
      高さ: 40px;
      背景: #f5f5f5;
      境界線の半径: 4px 4px 0px 0px;
      border-bottom: 1px 実線 #dddddd;
      パディング: 10px 16px;
      フォントサイズ: 14px;
      フォントファミリー: PingFangSC-Regular、PingFang SC;
      フォントの太さ: 400;
      色: #333333;
      行の高さ: 20px;
    }
    .データボックス{
      幅: 100%;
      高さ: 228px;
      オーバーフロー:自動;
      パディング: 6px 0;
      .データリスト{
        幅: 96%;
        高さ: 40px;
        ボックスのサイズ: 境界線ボックス;
        フォントサイズ: 14px;
        フォントファミリー: PingFangSC-Regular、PingFang SC;
        フォントの太さ: 400;
        色: #666;
        行の高さ: 20px;
        マージン: 0 2% 10px;
        パディング: 10px 16px;
        境界線: 1px 実線 #ddd;
        境界線の半径: 4px;
        ユーザー選択: なし;
        カーソル: ポインタ;
        &:ホバー{
          色: #01bc77;
          背景: rgba(1, 188, 119, 0.1);
        }
      }
    }
  }
  .MyShuttleLeft {
    幅: 362ピクセル;
    高さ: 100%;
    背景: #ffffff;
    境界線の半径: 4px;
  }
  .MyShuttleCenter {
    幅: 64ピクセル;
    高さ: 100%;
  }
  .MyShuttleRight {
    幅: 362ピクセル;
    高さ: 100%;
    背景: #ffffff;
    境界線の半径: 4px;
  }
}
</スタイル>