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

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

この記事では、主に次のような 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)"

ドラッグコンテンツトリガーをドロップする

ドラッグイベントとプロパティ

マークこれは非常に重要です!!! これにより、ドラッグ イベントの動作が決まります。クリックしてドラッグを開始すると、マウスがクリックされた場所がマーカーになります。
dragstart: マウスをクリックして移動したときに実行されます。
drag: dragstart が実行されると、マウスが動いている間は継続的にトリガーされます。
dragend: ドラッグ動作が終了したとき、つまりマウスが放されたときにトリガーされます。
dragenter: ドラッグされている要素のマーカーが DOM 要素に入るとトリガーされ、最初にトリガーされます。入力された DOM 要素がこのイベントをトリガーします。
dragover: ドラッグされた要素のマーカーが着信 DOM 要素上で移動したとき、および要素自体が移動したときにトリガーされます。
dragleave: ドラッグされた要素が入力された DOM から離れた時にトリガーされます。

H5 ドラッグ属性 ドラッグ可能

draggable: 要素をドラッグ可能にする必要がある場合は、true に設定する必要があります。デフォルト値は false です。デフォルトでは、選択したテキスト、画像、リンクをドラッグできます。
DataTransfer オブジェクト: このプロパティは、ドラッグ アンド ドロップされたデータとインタラクション情報を保存するために使用されます。このコンポーネントでは使用されず、一時的に無視されます。

マウスが対象の div ボックスに移動すると、追加されます。単純な例で問題を最もよく説明できます。

<テンプレート>
  <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;
  }
}
</スタイル>

これで、vue ドラッグ アンド ドロップ追加の簡単な実装に関するこの記事は終了です。より関連性の高い vue ドラッグ アンド ドロップ追加のコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue ベースのドラッグ アンド ドロップ機能を実装する
  • Vueをベースにドラッグ効果を実現
  • Vue.Draggable ドラッグ機能の設定と使用方法
  • Vue.Draggableはドラッグ効果を実現します
  • Vue をベースにスムーズな遷移のドラッグ アンド ドロップ ソート機能を実装する
  • Vue カスタム ディレクティブ ドラッグ関数の例
  • Sortable.js を使用して vue2.0 に実装されたドラッグ アンド ドロップ機能の例
  • Vue ベースのドラッグ可能なツリーテーブルの例の詳細な説明
  • Vue がドラッグ プログレス バーのスライド コンポーネントを開発

<<:  HTMLのマーキータグは、シームレスなスクロールマーキー効果を実現します。

>>:  MySQLデータベースについて学びましょう

推薦する

vue+element で動的スキニングを実装するためのサンプルコード

プロジェクトのテーマがすべての人の美的感覚を満足できないこともあります。このとき、スキン変更機能は非...

HTML における要素の水平および垂直中央揃えに関する議論

ページをデザインするときには、ログイン ウィンドウを中央に配置するなど、DIV を中央に配置し、ペー...

MySQL の中国語ソートの詳細と例

MySQL の漢字ソートの詳細な説明デフォルトでは、MySQL は日付、時刻、および英語の文字列の並...

Vue テンプレート構成と Webstorm コード形式仕様設定

目次1. コンパイラコードフォーマット仕様設定2. Vueテンプレートの設定1. コンパイラコードフ...

mysql ルートユーザーを認証できず、Navicat リモート認証プロンプト 1044 の問題を解決します

まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...

ffmpeg コマンドラインを使用してビデオを変換するためのサンプルコード

この記事の本文を始める前に、まず ffmpeg プログラムをインストールする必要があります (Lin...

MySQL ログの設定と表示方法

MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...

すべてまたは逆の選択機能を実現するJavaScript

この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 2) (パート 36)

データのバックアップと復元パート2は次のとおりです基本的な概念:バックアップ、現在のデータまたはレコ...

iframe テクニックを使用して訪問者 QQ 実装のアイデアとサンプル コードを取得する

今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...

Vue3コンポーネントの開発詳細

目次1. はじめに2. コンポーネント開発1. コンポーネントの構成2. ヘッダーコンポーネントの開...

Kali Linux システムのバージョンを確認する方法

1. Kali Linuxシステムのバージョンを確認するコマンド: cat /etc/issue 2...

JavaScript で支払いの 10 秒カウントダウンを実現

この記事では、支払いの10秒カウントダウンを実現するためのJavaScriptの具体的なコードを参考...

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...