Vanilla Archives - XpresServers

Cara Membuat Efek Seret dan Letakkan dengan JavaScript Vanilla dan HTML

Pengantar

Menyeret-dan-meletakkan adalah interaksi pengguna umum yang dapat Anda temukan dalam banyak antarmuka pengguna.

Ada beberapa pustaka JavaScript yang sudah ada untuk menambahkan fitur seret-dan-letakkan ke aplikasi Anda. Namun, mungkin ada situasi ketika pustaka tidak tersedia atau menimbulkan overhead atau dependensi yang tidak diperlukan proyek Anda. Dalam situasi ini, pengetahuan API yang tersedia untuk Anda di peramban web modern dapat menawarkan solusi alternatif.

HTML Drag and Drop API bergantung pada model kejadian DOM untuk mengambil informasi tentang apa yang sedang diseret atau diletakkan serta memperbarui elemen itu saat menyeret atau meletakkan. Dengan penangan kejadian JavaScript, Anda dapat mengubah elemen apa saja menjadi item yang dapat diseret atau item yang dapat diletakkan ke dalamnya.

Dalam tutorial ini, kita akan membuat contoh seret-dan-letakkan menggunakan HTML Drag and Drop API bersama JavaScript vanilla untuk menggunakan penangan kejadian.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda akan memerlukan:

Peramban web modern yang mendukung Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Langkah 1 — Membuat Proyek dan Markup Awal

Proyek kita akan terdiri dari kontainer dengan dua tipe elemen anak:

Elemen anak yang dapat Anda seret
Elemen anak yang dapat memiliki elemen yang diletakkan ke dalamnya

Pertama, buka jendela terminal Anda dan buat direktori proyek baru:

mkdir drag-and-drop-example

Selanjutnya, navigasikan ke direktori itu:

Kemudian, buat berkas index.html dalam direktori itu:

Selanjutnya, tambahkan kode boilerplate untuk halaman web HTML:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Drag-and-Drop Example</title>
    <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
  </head>
  <body>
  </body>
</html>

Lalu, di antara tag <body> tambahkan item draggable dan dropzone (target peletakan):

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
  >
    dropzone
  </div>
</div>

Simpan dan tutup berkas. Kemudian, buat berkas style.css:

Selanjutnya, tambahkan gaya untuk elemen dalam berkas index.html:

style.css

.example-parent {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
}

.example-origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.example-draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.example-dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

Ini akan menambahkan beberapa pemformatan pada aplikasi. Sekarang Anda dapat melihat index.html di peramban dan mengamati bahwa ini menghasilkan draggable <div> dan dropzone <div>.

Selanjutnya, kita secara eksplisit akan membuat <div> pertama yang dapat diseret dengan menambahkan atribut draggable:

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
  >
    dropzone
  </div>
</div>

Simpan dan tutup berkas.

Terakhir, lihat lagi index.html di peramban. Jika kita mengklik draggable <div> dan menyeretnya di layar, akan ada indikasi visual yang bergerak.

Nilai asali untuk atribut draggable adalah auto. Artinya, perilaku asali peramban Anda akan menentukan apakah elemen dapat diseret atau tidak. Biasanya, ini berarti pemilihan teks, gambar, dan tautan dapat diseret tanpa menetapkan draggable="true".

Kini Anda memiliki berkas HTML dengan elemen yang dapat diseret. Kita lanjutkan dengan menambahkan penangan onevent.

`Langkah 2 — Menangani Kejadian Seret-dan-Letakkan dengan JavaScript`

Saat ini, jika kita melepaskan mouse saat menyeret elemen yang dapat diseret, tidak ada yang terjadi. Untuk memicu tindakan pada penyeretan atau peletakan di elemen DOM, kita perlu menggunakan Drag and Drop API:

ondragstart: Penangan kejadian ini akan dipasang ke elemen draggable kita dan aktif bila ada kejadian dragstart.
ondragover: Penangan kejadian ini akan dipasang ke elemen dropzone kita dan aktif bila ada kejadian dragover.
ondrop: Penangan kejadian ini juga akan dipasang ke elemen dropzone kita dan aktif bila ada kejadian drop.

Catatan: Seluruhnya ada delapan penangan kejadian: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, dan ondrop. Untuk contoh, kita tidak akan memerlukan semuanya.

Pertama, mari kita merujuk berkas script.js baru dalam index.html:

index.html

<body>
  ...
  <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
</body>

Selanjutnya, buat berkas script.js yang baru:

Objek DataTransfer akan terus melacak informasi terkait penyeretan yang terjadi saat ini. Untuk memperbarui elemen kita saat menyeret dan meletakkan, kita perlu mengakses langsung objek DataTransfer. Caranya, kita dapat memilih properti dataTransfer dari DragEvent elemen DOM.

Catatan: Objek DataTransfer secara teknis dapat melacak informasi untuk beberapa elemen yang sedang diseret secara bersamaan. Untuk contoh, kita akan fokus pada penyeretan satu elemen.

Metode setData objek dataTransfer dapat digunakan untuk mengatur informasi status penyeretan pada elemen yang diseret saat ini. Dibutuhkan dua parameter:

string yang mendeklarasikan format parameter kedua
data sebenarnya yang ditransfer

Tujuan kita adalah memindahkan elemen draggable ke elemen induk baru. Kita harus dapat memilih elemen draggable dengan id unik. Kita dapat mengatur id elemen yang diseret dengan metode setData sehingga dapat digunakan nanti.

Mari kita tinjau kembali berkas script.js dan membuat fungsi baru untuk menggunakan setData:

script.js

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);
}

Catatan: Internet Explorer 9 hingga 11 dilaporkan mengalami masalah saat menggunakan 'text/plain'. Formatnya harus 'text' untuk peramban itu.

Untuk memperbarui penataan gaya CSS item yang diseret, kita dapat mengakses gayanya menggunakan kejadian DOM lagi dan mengatur gaya apa pun yang kita inginkan untuk currentTarget.

Mari kita tambahkan ke fungsi dan ubah backgroundColor menjadi yellow:

script.js

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);

  event
    .currentTarget
    .style
    .backgroundColor="yellow";
}

Catatan: Gaya yang Anda ubah perlu diperbarui lagi secara manual saat peletakan jika Anda ingin gaya seret-saja. Jika Anda mengubah sesuatu saat mulai menyeret, elemen yang diseret akan mempertahankan gaya baru itu kecuali jika Anda mengubahnya kembali.

Sekarang, kita memiliki fungsi JavaScript untuk saat penyeretan dimulai.

Kita dapat menambahkan ondragstart ke elemen draggable di index.html:

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div class="example-dropzone">
    dropzone
  </div>
</div>

Lihat index.html di peramban Anda. Jika Anda mencoba menyeret item sekarang, penataan gaya yang dideklarasikan dalam fungsi kita akan diterapkan:

Namun, tidak akan terjadi apa pun saat Anda melepaskan klik.

Penangan kejadian selanjutnya yang akan terpicu dalam urutan ini adalah ondragover.

Perilaku peletakan asali untuk elemen DOM tertentu seperti <div> di peramban biasanya tidak menerima peletakan. Perilaku ini akan mencegat perilaku yang berusaha kita implementasikan. Untuk memastikan kita mendapatkan perilaku peletakan yang diinginkan, kita akan menerapkan preventDefault.

Mari kita kembali ke berkas script.js dan membuat fungsi baru untuk menggunakan preventDefault. Tambahkan kode ini ke akhir berkas:

script.js

function onDragOver(event) {
  event.preventDefault();
}

Sekarang, kita dapat menambahkan ondragover ke elemen dropzone di index.html:

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
  >
    dropzone
  </div>
</div>

Di titik ini, kita masih belum menulis kode yang menangani peletakan sesungguhnya. Penangan kejadian akhir yang akan terpicu dalam urutan ini adalah ondrop.

Mari kita kembali ke berkas script.js dan membuat fungsi baru.

Kita dapat merujuk data yang kita simpan sebelumnya dengan metode setData objek dataTransfer. Kita akan menggunakan metode getData objek dataTransfer. Data yang kita atur adalah id, jadi itulah yang akan dikembalikan kepada kita:

script.js

function onDrop(event) {
  const id = event
    .dataTransfer
    .getData('text');
}

Pilih elemen draggable dengan id yang kita ambil:

script.js

function onDrop(event) {
  // ...

  const draggableElement = document.getElementById(id);
}

Pilih elemen dropzone:

script.js

function onDrop(event) {
  // ...

  const dropzone = event.target;
}

Tambahkan elemen draggable ke dropzone:

script.js

function onDrop(event) {
  // ...

  dropzone.appendChild(draggableElement);
}

Atur ulang objek dataTransfer kita:

script.js

function onDrop(event) {
  // ...

  event
    .dataTransfer
    .clearData();
}

Sekarang, kita dapat menambahkan ondrop ke elemen dropzone di index.html:

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);"
  >
    dropzone
  </div>
</div>

Setelah itu selesai, kita memiliki fitur seret-dan-letakkan lengkap. Lihat index.html di peramban Anda dan seret elemen draggable ke dropzone.

Contoh kita menangani skenario dari item tunggal yang dapat diseret dan target peletakan tunggal. Anda dapat memiliki beberapa item yang dapat diseret, beberapa target peletakan, dan menyesuaikannya dengan semua penangan kejadian Drag and Drop API lainnya.

`Langkah 3 — Membuat Contoh Lanjutan dengan Beberapa Item yang Dapat Diseret`

Berikut ini satu lagi contoh cara menggunakan API ini: daftar agenda berisi beberapa tugas yang dapat diseret yang dapat Anda pindahkan dari kolom "To-do" ke kolom "Done".

Untuk membuat daftar agenda sendiri, tambahkan lagi elemen yang dapat diseret dengan id unik ke index.html:

index.html

<div class="example-parent">
  <h1>To-do list</h1>
  <div class="example-origin">
    To-do
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 1
    </div>
    <div
      id="draggable-2"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 2
    </div>
    <div
      id="draggable-3"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 3
    </div>
    <div
      id="draggable-4"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 4
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);"
  >
    Done
  </div>
</div>

Lihat index.html di peramban Anda dan seret item di kolom To-do ke kolom Done. Anda telah membuat aplikasi agenda dan menguji fungsionalitasnya.

`Kesimpulan`

Dalam artikel ini, Anda telah membuat aplikasi agenda untuk mendalami fungsionalitas seret-dan-letakkan yang tersedia di peramban web modern.

Drag and Drop API menyediakan beberapa opsi untuk menyesuaikan tindakan Anda selain menyeret dan meletakkan. Misalnya, Anda dapat memperbarui penataan gaya CSS item yang diseret. Selain itu, alih-alih memindahkan item, Anda dapat menyalin item yang dapat diseret agar direplikasi saat peletakan.

Ingatlah bahwa walaupun banyak peramban web yang mendukung teknologi ini, Anda mungkin tidak dapat bergantung padanya jika audiens Anda terdiri dari perangkat yang tidak mendukung fungsionalitas ini.

Untuk mempelajari lebih lanjut tentang semua yang dapat Anda letakkan dengan Drag and Drop API, lihat dokumentasi MDN tentang hal itu.

Source link

`Vanilla JavaScriptとHTMLを使用してドラッグ＆ドロップ要素を作成する方法`

hassan latif
blog

`はじめに`

ドラッグ＆ドロップは、多くのGUIで見られる一般的なユーザー操作です。

アプリケーションには、ドラッグ＆ドロップ機能を追加するための既存のJavaScript ライブラリがあります。ただし、ライブラリを使用できない場合や、プロジェクトで必要のないオーバーヘッドや依存関係が発生する場合があります。このような状況において、最新のWebブラウザで利用可能なAPIの知識により、代替ソリューションを提供できます。

HTML のドラッグ＆ドロップ APIは、DOM のイベントモデルに依存して、ドラッグまたはドロップされている内容に関する情報を取得し、ドラッグまたはドロップ時にその要素を更新します。JavaScript イベントハンドラを使用すると、任意の要素をドラッグ可能な項目またはドロップ可能な項目に変換できます。

このチュートリアルでは、Vanilla JavaScriptとHTMLドラッグ&ドロップ APIを使用して、イベントハンドラを使用するドラッグ＆ドロップ例を作成します。

`前提条件`

このチュートリアルを実行するには、次のものが必要です。

ドラッグ＆ドロップ API（Chrome 4以降、Firefox 3.5以降、Safari 3.1以降、Edge 18以降）に対応した最新のWebブラウザ。

`ステップ1 — プロジェクトと初期マークアップの作成`

このプロジェクトは、2種類の子要素を持つコンテナで構成されます。

ドラッグできる子要素
要素をドロップできる子要素

まず、端末ウィンドウを開き、新しいプロジェクトディレクトリを作成します。

mkdir drag-and-drop-example

次に、そのディレクトリに移動します。

その後、そのディレクトリにindex.html ファイルを作成します。

次に、HTML Web ページに定型コードを追加します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Drag-and-Drop Example</title>
    <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
  </head>
  <body>
  </body>
</html>

<body> タグの間に、draggable 項目と dropzone （ドロップターゲット）を追加します。

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
  >
    dropzone
  </div>
</div>

ファイルを保存して閉じます。その後、style.css ファイルを作成します。

次に、index.html ファイル内の要素のスタイルを追加します。

style.css

.example-parent {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
}

.example-origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.example-draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.example-dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

これによりアプリケーションにフォーマットが追加されます。これで、ブラウザでindex.htmlを表示し、draggable <div> と dropzone <div> が生成されることを確認できるようになりました。

次に、draggable 属性を追加して、最初の<div>を明示的にドラッグ可能にします。

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
  >
    dropzone
  </div>
</div>

ファイルを保存して閉じます。

最後に、ブラウザでindex.htmlを再び表示します。draggable <div> をクリックして画面上をドラッグすると、移動していることが一目で分かります。‏

draggable 属性のデフォルト値は、autoです。つまり、要素がドラッグ可能であるかどうかは、ブラウザのデフォルトの動作によって決定されます。通常、これはdraggable="true"を指定せずに、テキスト選択、画像、およびリンクをドラッグできることを意味します。

これで、ドラッグ可能な要素を含むHTMLファイルが作成されました。oneventハンドラの追加に進みます。

`ステップ2 — JavaScript を使用したドラッグ＆ドロップイベントの処理`

今のところ、ドラッグ可能な要素をドラッグしながらマウスを離しても、何も起こりません。DOM 要素でドラッグまたはドロップ時にアクションをトリガーするには、ドラッグ＆ドロップ API を使用する必要があります。

ondragstart:このイベントハンドラは、draggable 要素に関連付けられ、dragstart イベントが発生したときに起動します。
ondragover:このイベントハンドラは、dropzone 要素に関連付けられ、dragoverイベントが発生したときに起動します。
ondrop:このイベントハンドラは、dropzone 要素に関連付けられ、drop イベントが発生したときに起動します。

注: 合計8つのイベントハンドラがあります。ondrag、ondragend、ondragenter、ondragexit、ondragleave、ondragover、ondragstart、およびondropです。この例では、これらすべてを必要とするわけではありません。

まず、index.htmlで新しいscript.jsファイルを参照しましょう。

index.html

<body>
  ...
  <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
</body>

次に、新しいscript.jsファイルを作成します。

DataTransfer オブジェクトは、現在発生しているドラッグに関連する情報を追跡します。ドラッグおよびドロップ時に要素を更新するには、DataTransfer オブジェクトに直接アクセスする必要があります。これを行うには、DOM 要素の DragEvent から dataTransfer プロパティを選択します。

注:DataTransfer オブジェクトは、技術的には、同時にドラッグされている複数の要素の情報を追跡することができます。この例では、1 つの要素のドラッグに焦点を当てます。

dataTransfer オブジェクトのsetData メソッドを使用すると、現在ドラッグされている要素のドラッグ状態の情報を設定することができます。次の、2つのパラメータを使用します。

2番目のパラメータの型を宣言する文字列
転送される実際のデータ

この目標は、draggable 要素を新しい親要素に移動することです。一意のidを持つdraggable 要素を選択する必要があります。後で使用できるように、setData メソッドを使用してドラッグ可能な要素のid を設定することができます。

script.js ファイルに再度アクセスして、setData を使用するための新しい関数を作成しましょう。

script.js

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);
}

注:Internet Explorer 9 ～ 11 では'text/plain'の使用に問題があると報告されています。そのブラウザの'text'形式にする必要があります。

ドラッグされたアイテムの CSS スタイリングを更新するには、DOM イベントを再度使用してcurrentTarget に必要なスタイルを設定することによって、そのスタイルを利用することができます。

関数に追加して、backgroundColor をyellowに変更してみましょう。

script.js

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);

  event
    .currentTarget
    .style
    .backgroundColor="yellow";
}

注:ドラッグのみのスタイルが必要な場合は、変更するスタイルをドロップ時に手動で再度更新する必要があります。ドラッグの開始時に何か変更した場合は、ドラッグした要素は元に戻さない限り、新しいスタイルを保持します。

これで、ドラッグを開始するときのJavaScript関数が作成されました。

次のように、index.htmlのdraggable 要素にondragstartを追加できます。

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div class="example-dropzone">
    dropzone
  </div>
</div>

ブラウザでindex.html を表示します。ここで項目をドラッグしようとすると、関数で宣言されたスタイルが適用されます。

ただし、クリックを離しても何も起こりません。

このシーケンスで起動される次のイベントハンドラは、ondragover です。

ブラウザの<div>のような特定のDOM 要素のデフォルトドロップ動作は、通常、ドロップは受け入れません。この動作は、実装しようとしている動作を阻みます。希望するドロップ動作を確実に行うために、 preventDefault を適用します。

script.js ファイルに再度アクセスして、preventDefault を使用するための新しい関数を作成しましょう。ファイルの最後に次のコードを追加します。

script.js

function onDragOver(event) {
  event.preventDefault();
}

これで、index.html の dropzone 要素にondragover を追加できます。

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
  >
    dropzone
  </div>
</div>

この時点で、実際のドロップを処理するコードはまだ記述されていません。このシーケンスで起動される最後のイベントハンドラは、 ondrop です。

script.js ファイルに再度アクセスし、新しい関数を作成しましょう。

dataTransfer オブジェクトの setData メソッドを使用して、以前保存したデータを参照できます。dataTransfer オブジェクトの getData メソッドを使用します。設定したデータはidなので、それが返されます。

script.js

function onDrop(event) {
  const id = event
    .dataTransfer
    .getData('text');
}

取得したidを持つ、draggable 要素を選択します。

script.js

function onDrop(event) {
  // ...

  const draggableElement = document.getElementById(id);
}

dropzone 要素を選択します。

script.js

function onDrop(event) {
  // ...

  const dropzone = event.target;
}

draggable 要素をdropzone に追加します。

script.js

function onDrop(event) {
  // ...

  dropzone.appendChild(draggableElement);
}

dataTransfer オブジェクトをリセットします。

script.js

function onDrop(event) {
  // ...

  event
    .dataTransfer
    .clearData();
}

これで、index.html の dropzone 要素にondrop を追加できます。

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);"
  >
    dropzone
  </div>
</div>

これが完了すると、ドラッグ＆ドロップ機能が完成します。ブラウザでindex.html を表示し、draggable 要素をdropzone にドラッグします。

この例では、単一のドラッグ可能な項目と単一のドロップターゲットのシナリオを処理します。複数のドラッグ可能な項目、複数のドロップターゲットを設定し、他のすべてのドラッグ＆ドロップ API イベントハンドラを使用してカスタマイズできます。

`ステップ3 — 複数のドラッグ可能な項目を使用して拡張例を作成する`

この API の使用例を次に示します。「To-do」列から「Done」列に移動できるドラッグ可能なタスクを含むTo Doリストです。

独自の To Do リストを作成するには、一意のid を持つドラッグ可能な要素を index.html に次のように追加します。

index.html

<div class="example-parent">
  <h1>To-do list</h1>
  <div class="example-origin">
    To-do
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 1
    </div>
    <div
      id="draggable-2"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 2
    </div>
    <div
      id="draggable-3"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 3
    </div>
    <div
      id="draggable-4"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 4
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);"
  >
    Done
  </div>
</div>

ブラウザでindex.html を表示し、To-do 列の項目をDone 列にドラッグします。To Do アプリケーションを作成し、機能をテストしました。

`まとめ`

この記事では、To Doアプリケーションを作成し、最新のWebブラウザで使用可能なドラッグ＆ドロップ機能を見てきました。

ドラッグ＆ドロップ API には、ドラッグ＆ドロップ以外のアクションをカスタマイズするための複数のオプションが用意されています。たとえば、ドラッグした項目の CSS スタイルを更新することができます。また、項目を移動する代わりに、ドラッグ可能な項目をコピーしてドロップ時に複製することもできます。

多くのWebブラウザではこの技術がサポートされていますが、対象ユーザーがこの機能をサポートしていないデバイスで成り立っている場合は、この技術を利用できない場合があることに注意してください。

ドラッグ＆ドロップ API を使用してドロップできるすべての機能の詳細については、MDN のドキュメントを参照してください。

Source link

`Wie man Drag & Drop-Elemente mit Vanilla JavaScript und HTML erstellt`

hassan latif
blog

`Einführung`

Drag & Drop ist eine übliche Benutzerinteraktion, die Sie in vielen grafischen Benutzeroberflächen finden.

Es gibt bereits vorhandene JavaScript-Bibliotheken zum Hinzufügen einer Drag-and-Drop-Funktion zu Ihrer Anwendung. Es kann jedoch Situationen geben, in denen eine Bibliothek nicht verfügbar ist oder einen Overhead oder eine Abhängigkeit mit sich bringt, die Ihr Projekt nicht benötigt. In diesen Situationen kann die Kenntnis der APIs, die Ihnen in modernen Webbrowsern zur Verfügung stehen, alternative Lösungen bieten.

Die HTML Drag and Drop-API stützt sich auf das Ereignismodell des DOM, um Informationen darüber zu erhalten, was gezogen oder fallen gelassen wird, und um dieses Element per Drag and Drop zu aktualisieren. Mit JavaScript-Ereignishandlern können Sie jedes beliebige Element in ein ziehbares Element oder in ein Element, in das abgelegt werden kann, umwandeln.

In diesem Tutorial werden wir ein Drag-and-Drop-Beispiel mit der HTML-Drag-and-Drop-API mit Vanille-JavaScript erstellen, um die Event-Handler zu verwenden.

`Voraussetzungen`

Um diesem Tutorial zu folgen, benötigen Sie:

Einen modernen Webbrowser, der die Drag and Drop API unterstützt (Chrome Firefox 3.5+, Safari 3.1+, Edge 18+).

`Schritt 1 — Erstellen des Projekts und der Ersteinrichtung`

Unser Projekt wird aus einem Container mit zwei Arten von untergeordneten Elementen bestehen:

Untergeordnete Elemente, die Sie ziehen können
Untergeordnete Elemente, in die Elemente eingefügt werden können

Öffnen Sie zunächst Ihr Terminalfenster und erstellen Sie ein neues Projektverzeichnis:

mkdir drag-and-drop-example

Navigieren Sie dann zu diesem Verzeichnis:

Erstellen Sie dann eine index.html - Datei in diesem Verzeichnis:

Als Nächstes fügen Sie einen Boilerplate-Code für eine HTML-Webseite hinzu:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My Drag-and-Drop Example</title>
    <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
  </head>
  <body>
  </body>
</html>

Und zwischen den Tags <body> fügen Sie Ihr draggable und Ihr dropzone (Ablageziel) hinzu:

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
  >
    dropzone
  </div>
</div>

Speichern und schließen Sie die Datei. Erstellen Sie dann eine Datei style.css:

Als nächstes fügen Sie Stile für die Elemente in unserer Datei index.html hinzu:

style.css

.example-parent {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
}

.example-origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.example-draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.example-dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

Dadurch wird der Anwendung etwas Formatierung hinzugefügt. Jetzt können Sie index.html im Browser anzeigen und beobachten, dass dies ein draggable <div> und ein dropzone <div> produziert.

Als Nächstes erstellen wir explizit die erste <div> durch Hinzufügen des Attributs draggable .

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
  >
    dropzone
  </div>
</div>

Speichern und schließen Sie die Datei.

Sehen Sie sich schließlich index.html erneut im Browser an. Wenn wir auf das draggable<<div> klicken und es über den Bildschirm ziehen, sollte es eine visuelle Anzeige der Bewegung geben.

Der Standardwert für das Attribut draggable ist auto. Das bedeutet, ob das Element ziehbar ist, wird durch das Standardverhalten Ihres Browsers bestimmt. Typischerweise bedeutet dies, dass Textauswahlen, Bilder und Links gezogen werden können, ohne dass draggable =„wahr" angegeben sein muss.

Sie haben nun eine HTML-Datei mit einem ziehbaren Element. Wir werden uns mit der Aufnahme von Ereignishandlern befassen.

`Schritt 2 — Handhaben von Drag-and-Drop-Ereignissen mit JavaScript`

Wenn wir jetzt die Maus loslassen, während wir das verschiebbare Element ziehen, geschieht nichts. Um eine Aktion beim Ziehen oder Ablegen von DOM-Elementen auszulösen, müssen wir die Drag & Drop-API verwenden:

ondragstart: Dieser Ereignishandler wird an unser ^>draggable<^>Element angehängt und ausgelöst, wenn ein dragstart-Ereignis eintritt.
ondragover: Dieser Ereignishandler wird an unser ^>dropzone<^>-Element angehängt und ausgelöst, wenn ein dragover-Ereignis eintritt.
ondrop: Dieser Ereignishandler wird an unser dropzone-Element angehängt und ausgelöst, wenn ein drop-Ereignis eintritt.

Anmerkung: Insgesamt gibt es acht Ereignishandler: ondragondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart und ondrop. Für unser Beispiel benötigen wir sie nicht alle.

Lassen Sie uns zunächst eine neue Datei script.js in unserer index.html referenzieren:

index.html

<body>
  ...
  <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
</body>

Erstellen Sie als Nächstes eine neue Datei script.js:

Das DataTransfer-Objekt verfolgt die Informationen, die sich auf das aktuelle Drag beziehen. Um unser Element per Drag and Drop zu aktualisieren, müssen wir direkt auf das DataTransfer-Objekt zugreifen. Zu diesem Zweck können wir die Eigenschaft dataTransfer aus dem DragEvent des DOM-Elements auswählen.

Anmerkung: Das DataTransfer-Objekt kann Informationen für mehrere Elemente verfolgen, die gleichzeitig gezogen werden. Wir werden uns beispielsweise auf das Ziehen eines Elements konzentrieren.

Die setData-Methode des Objekts dataTransfer kann verwendet werden, um die zu ziehenden Statusinformationen für Ihr aktuell gezogenes Element festzulegen. Dazu sind zwei Parameter erforderlich:

Einen String, der das Format des zweiten Parameters deklariert
die tatsächlichen übergebenen Daten

Unser Ziel ist es, unser Element draggable in ein neues übergeordnetes Element zu verschieben. Wir müssen in der Lage sein, unser draggable-Element mit einer eindeutigen ID auszuwählen. Wir können die ID des gezogenen Elements mit der setData-Methode setzen, damit es später verwendet werden kann.

Schauen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von setData:

script.js

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);
}

Anmerkung: Internet Explorer 9 bis 11 hat laut Angaben Probleme mit der Verwendung von „text/plain“. Das Format muss für diesen Browser „text“ sein.

Um das CSS-Styling des gezogenen Elements zu aktualisieren, können wir auf seine Stile zugreifen, indem wir erneut das DOM-Ereignis verwenden und die gewünschten Stile für die currentTarget festlegen.

Ergänzen wir unsere Funktion und ändern die Hintergrundfarbe zu gelb:

script.js

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);

  event
    .currentTarget
    .style
    .backgroundColor="yellow";
}

Anmerkung: Alle Stile, die Sie ändern, müssen beim Ablegen erneut manuell aktualisiert werden, wenn Sie Stile nur zum Ziehen wünschen. Wenn Sie etwas ändern, sobald das Ziehen beginnt, behält das gezogene Element diese neue Gestaltung bei, es sei denn, Sie ändern es wieder zurück.

Jetzt haben wir unsere JavaScript-Funktion für den Start des Ziehens.

Wir können ondragstart dem Element draggable in index.html hinzufügen:

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div class="example-dropzone">
    dropzone
  </div>
</div>

Sehen Sie sich index.html in Ihrem Browser an. Wenn Sie versuchen, Ihren Artikel jetzt zu ziehen, wird das in unserer Funktion deklarierte Styling angewendet:

Es passiert jedoch nichts, wenn Sie Ihren Klick loslassen.

Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondragover.

Das Standard-Drop-Verhalten für bestimmte DOM-Elemente wie <div>s in Browsern akzeptiert normalerweise kein Ablegen. Dieses Verhalten wird das Verhalten abfangen, das wir implementieren möchten. Um sicherzustellen, das wir das gewünschte Ablageverhalten erhalten, wenden wir preventDefault an.

Sehen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von preventDefault. Fügen Sie diesen Code am Ende der Datei hinzu:

script.js

function onDragOver(event) {
  event.preventDefault();
}

Jetzt können wir unserem Element dropzone in index.html ondragover hinzufügen:

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
  >
    dropzone
  </div>
</div>

Zu diesem Zeitpunkt haben wir immer noch keinen Code geschrieben, der das tatsächliche Ablegen behandelt. Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondrop.

Lassen Sie uns unsere Datei script.js erneut besuchen und eine neue Funktion erstellen.

Wir können auf die Daten verweisen, die wir früher mit der setData-Methode des dataTransfer-Objekts gespeichert haben. Wir werden die getData-Methode des dataTransfer-Objekts verwenden. Die Daten, die wir gesetzt haben, waren die ID, und das ist es, was uns zurückgegeben wird:

script.js

function onDrop(event) {
  const id = event
    .dataTransfer
    .getData('text');
}

Wählen Sie unser draggable Element mit der von uns abgerufenen ID aus:

script.js

function onDrop(event) {
  // ...

  const draggableElement = document.getElementById(id);
}

Wählen Sie unser Element dropzone:

script.js

function onDrop(event) {
  // ...

  const dropzone = event.target;
}

Fügen Sie unser Element draggable an das Element dropzone an:

script.js

function onDrop(event) {
  // ...

  dropzone.appendChild(draggableElement);
}

Setzen Sie unser dataTransfer-Objekt zurück:

script.js

function onDrop(event) {
  // ...

  event
    .dataTransfer
    .clearData();
}

Jetzt können wir unserem Element dropzone in index.html ondrop hinzufügen:

index.html

<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);"
  >
    dropzone
  </div>
</div>

Sobald das erledigt ist, haben wir eine vollständige Drag-and-Drop-Funktion. Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie das Element draggable zu dropzone.

Unser Beispiel behandelt das Szenario eines einzelnen verschiebbaren Elements und eines einzelnen Ablageziels. Sie können mehrere verschiebbare Elemente und mehrere Ablageziele haben und sie an alle anderen Drag & Drop-API-Ereignishandler anpassen.

`Schritt 3 — Erstellen eines erweiterten Beispiels mit mehreren ziehbaren Elementen`

Hier ist ein weiteres Beispiel dafür, wie Sie diese API verwenden können: Eine Aufgabenliste mit ziehbaren Aufgaben, die Sie von einer „zu erledigen"-Spalte in eine Spalte „erledigt" ziehen können.

Um Ihre eigene zu erledigende Liste zu erstellen, fügen Sie mehr ziehbare Elemente mit einzigartigen IDs zu index.html hinzu:

index.html

<div class="example-parent">
  <h1>To-do list</h1>
  <div class="example-origin">
    To-do
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 1
    </div>
    <div
      id="draggable-2"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 2
    </div>
    <div
      id="draggable-3"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 3
    </div>
    <div
      id="draggable-4"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 4
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);"
  >
    Done
  </div>
</div>

Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie die Elemente in der Spalte zu erledigen zur Spalte erledigt. Sie haben eine zu erledigende Anwendung erstellt und die Funktionalität getestet.

`Zusammenfassung`

In diesem Artikel haben Sie eine zu erledigende Anwendung erstellt, um die Drag-and-Drop-Funktionalität zu untersuchen, die modernen Webbrowsern zur Verfügung steht.

Die Drag und Drop API bietet mehrere Optionen für die Anpassung Ihrer Aktionen über das Ziehen und Ablegen. Beispielsweise können Sie die CSS-Styling Ihrer verschobenen Elemente aktualisieren. Anstatt das Element zu verschieben, können Sie sich auch dafür entscheiden, Ihr verschiebbares Element zu kopieren, so dass es beim Ablegen repliziert wird.

Denken Sie daran, dass viele Webbrowser diese Technologie zwar unterstützen, Sie sich womöglich jedoch nicht darauf verlassen können, wenn Ihr Publikum aus Geräten besteht, die diese Funktionalität nicht unterstützen.

Um mehr darüber zu erfahren, was Sie alles mit der Drag-and-Drop-API ablegen können, lesen Sie die Dokumente von MDN.

Source link

1
2
Next Page »

Shared

Cloud VPS

Dedicated

Vanilla

Cara Membuat Efek Seret dan Letakkan dengan JavaScript Vanilla dan HTML

Pengantar

Prasyarat

Langkah 1 — Membuat Proyek dan Markup Awal

Langkah 2 — Menangani Kejadian Seret-dan-Letakkan dengan JavaScript

Langkah 3 — Membuat Contoh Lanjutan dengan Beberapa Item yang Dapat Diseret

Kesimpulan

Vanilla JavaScriptとHTMLを使用してドラッグ＆ドロップ要素を作成する方法

はじめに

前提条件

ステップ1 — プロジェクトと初期マークアップの作成

ステップ2 — JavaScript を使用したドラッグ＆ドロップ イベントの処理

ステップ3 — 複数のドラッグ可能な項目を使用して拡張例を作成する

まとめ

Wie man Drag & Drop-Elemente mit Vanilla JavaScript und HTML erstellt

Einführung

Voraussetzungen

Schritt 1 — Erstellen des Projekts und der Ersteinrichtung

Schritt 2 — Handhaben von Drag-and-Drop-Ereignissen mit JavaScript

Schritt 3 — Erstellen eines erweiterten Beispiels mit mehreren ziehbaren Elementen

Zusammenfassung

`Langkah 2 — Menangani Kejadian Seret-dan-Letakkan dengan JavaScript`

`Langkah 3 — Membuat Contoh Lanjutan dengan Beberapa Item yang Dapat Diseret`

`Kesimpulan`

`Vanilla JavaScriptとHTMLを使用してドラッグ＆ドロップ要素を作成する方法`

`はじめに`

`前提条件`

`ステップ1 — プロジェクトと初期マークアップの作成`

`ステップ2 — JavaScript を使用したドラッグ＆ドロップイベントの処理`

`ステップ3 — 複数のドラッグ可能な項目を使用して拡張例を作成する`

`まとめ`

`Wie man Drag & Drop-Elemente mit Vanilla JavaScript und HTML erstellt`

`Einführung`

`Voraussetzungen`

`Schritt 1 — Erstellen des Projekts und der Ersteinrichtung`

`Schritt 2 — Handhaben von Drag-and-Drop-Ereignissen mit JavaScript`

`Schritt 3 — Erstellen eines erweiterten Beispiels mit mehreren ziehbaren Elementen`

`Zusammenfassung`