Vuejsにおけるドラッグアンドドロップの実装

8938 ワード
css vue webdev productivity テキストリンク
この記事では、我々は何か楽しいを実装されます.私たちはVuejsでドラッグアンドドロップ機能を実装します.私は、あなたがこれをセットアップするのを助ける図書館の全部の多くがあるということを知っています、しかし、フードの下でどのように働くかについて理解するその常に良い考え.
その非常に小さなアプリケーションから、私たちはVUE CLIを使用していないでしょう、むしろ、我々はVuejsスクリプトタグを使用しています.これはまた、私たちのCLIが私たちを与えるすべての能力を与える.

vueテンプレートを使用する準備


VueでWebアプリケーションを構築している場合は、Vueテンプレートを使用してプロジェクトをダウンロードして使用する準備ができているチェックアウトをお勧めします.彼らは素敵なインターフェイスと来るとしてもカスタマイズするのは簡単です.彼らはあなたのアプリケーションのユーザーインターフェイスを作成過ごすために必要な時間のあなたの多くを保存することができます.チェックアウトするbest vue templates wrappixelから.WrapPixel VUE、角度、反応とブートストラップフレームワークで高品質の管理ダッシュボードを提供するために知っています.
我々は、プロジェクトディレクトリを設定して起動すると、我々のデスクトップディレクトリにフォルダを作成する、これは我々のアプリケーションを設定する場所です.
基本的に2つのファイルが必要ですindex.html ファイルとmain.js ファイル.すべてのテンプレートコードはindex.html ファイルとすべての私たちのVuejsコードはmain.js ファイル.

Vueドラッグアンドドロップ画像のアップロード


これを行うには、次のように入力します.
cd desktop && mkdir vuedragndrop && cd vuedragndrop
touch index.html && touch main.js
code .
このコマンドはディレクトリ内にこのファイルを作成し、VSコードでディレクトリを開きます.
インデックスを変更することから始めます.HTML 5ファイルをカスタムHTML 5に追加し、Vueスクリプトタグを追加します.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script src="main.js"></script>
    </body>
    </html>
HTML 5 BoilerPlateを定義し、頭のタグにVUEJSスクリプトタグを追加することから始めます.これは、ページがロードされたときにすぐにVUEJSを初期化します.それから、我々はdiv のapp , これは、我々がすべての我々のvuejsコードを書くところです.ライブサーバーでアプリケーションを実行する必要があります.あなたはNPMを使用して任意のライブサービスをお好みのインストールすることができます.
これを実行した後に、私たちはVUEJSインスタンスを作成する必要がありますmain.js ファイル
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})
我々はnew Vue() VUEJSのインスタンスを作成するメソッドとmessage 我々が参照するデータ資産index.html ファイル.
ドラッグアンドドロップポイントを表示するシンプルなユーザーインターフェイスを作成します.次のマークアップをdivの内部に追加しますapp :
     <div id="app">
            <div class="container">
                <h4>Drag and Drop here</h4>
            </div>
            {{message}}
        </div>

And then add this styles in the head tag:

     <style>
            .container {
                width: 350px;
                height: 350px;
                border: 2px dotted gray
            }
            .container h4 {
                text-align: center;
                font-family: sans-serif;
            }
        </style>
こうすると、次のようになります:

データプロパティの追加


ボックスにドロップされたファイルを保持するデータプロパティを追加する必要があります.Vueインスタンスのデータプロパティに以下を追加するには、次の手順に従います.
 files: [],
その後、私たちは@drop 私たちのファイルを選択するイベントもv-cloak 隠れる際に使われるatrribute{{tags}} 前にアプリの負荷.
さて、私たちのdivは次のようになります.
 <div class="container" v-cloak @drop.prevent="addFile" @dragover.prevent>
    <h4>Drag and Drop here</h4>
 </div>
我々は、定義する必要がありますaddFile vueインスタンス内のメソッド.これを行うには、Vueインスタンスでメソッドオブジェクトを作成します.
 addFile(e) {
      let files = e.dataTransfer.files;
      [...files].forEach(file => {
        this.files.push(file);
        console.log(this.files)
      });
    }
これを実行した後、コンソールを開き、ボックス内のファイルをドラッグアンドドロップします.これを行うと、ボックス内のファイルの詳細が記録されます.
私たちができることは、ボックスを使用して選択した画像を表示することです<li> タグ.この機能を次のコードに変更して追加しましょう.
     <div class="container" v-cloak @drop.prevent="addFile" @dragover.prevent>
        <h4>Drag and Drop here</h4>
        <li v-for="(file,id) in files" :key="id" class="list-group-item mb-3 border-top">
        {{ file.name }} ({{ file.size }} kb)
        <button>Remove</button>
     </div>
ファイルをドラッグアンドドロップするとファイル名とファイルサイズが得られます.

からのイメージを削除


また、ファイルを削除するメソッドを追加することもできますfiles 削除ボタンにメソッドを追加する
<button @click="removeFile(file)">Remove</button>
それから、removeFile メソッドオブジェクトのメソッド:
 removeFile(file) {
      this.files = this.files.filter(f => {
        return f != file;
      });
    },
これで、あなたは今から任意のファイルを削除することができますfiles 配列.
各々のファイルの側をフォーマットするvuejsフィルタをつくることによって、余分のステップに行かせてください.フィルターオブジェクトを作成し、このメソッドを追加します
 filters: {
    kb(val) {
      return Math.floor(val / 1024);
    }
  },
基本的にこれは、実際のサイズを得るために1024でファイルのサイズを分割することです.VUEJSフィルタを使用するには、パイプを通過してこれを行う必要があります.
    {{ file.name }} ({{ file.size | kb }} kb)

ブートストラップによるVueドラッグアンドドロップのスタイリング


我々のユーザーインターフェイスを良くするために、我々はブートストラップCSSのCDNとGoogleのフォントをアプリケーションに追加することができます.HTMLヘッドを修正しましょう.
 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drag and Drop</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
      * {
        font-family: "Kumbh Sans", sans-serif;
      }
      .wrapper {
        width: 350px;
        height: 350px;
        border: 2px dotted gray;
      }
    </style>
  </head>
これにより、マークアップを次のように変更できます.
     <body>
        <div id="app">
          <nav class="navbar navbar-light bg-info">
            <div class="container">
              <a class="navbar-brand" href="#">Vue Drag and Drop</a>
            </div>
          </nav>
          <div class="container">
            <div class="row mt-4">
              <div class="col-md-6 offset-md-3">
                <div
                  class="wrapper px-2"
                  v-cloak
                  @drop.prevent="addFile"
                  @dragover.prevent
                >
                  <h4 class="mt-3 text-center">Drag and Drop here</h4>
                  <ul class="list-group">
                    <li class="list-group-item" v-for="(file,id) in files">
                      {{ file.name }} ({{ file.size | kb }} kb)
                      <button
                        class="btn btn-danger btn-sm float-right"
                        @click="removeFile(file)"
                      >
                        x
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script src=" main.js"></script>
      </body>
アプリケーションが次のようになります.
ブログ一覧にもどる
[Dev101]#1 Play with Docker