Dragulaでウェブサイトにドラッグ＆ドロップを簡単に追加

無料のライブラリを探しています ドラッグ＆ドロップ機能を処理する? それから ドラキュラ あなたが必要とする唯一のリソース.

この無料のスクリプトはあなたを可能にします ページ上の任意の要素にドラッグ＆ドロップ機能を追加する. これには、一般的なJavaScriptと共に、React＆AngularJSフレームワークのサポートが含まれます。.

ドラキュラはセットアップがとても簡単で、付属しています ユーザーの行動に対する一連のカスタムトリガー. つまり、ユーザーがアイテムをドラッグしたり、アイテムをクリックしたり、ページの任意の部分を再配置したりした後で、独自の機能を起動できます。.

ライブデモを覗いてみるとわかります いくつかのコードスニペット, に加えて 使えるサンプル.

ドラキュラの設定 単一のJavaScriptファイルのみが必要 それを動かすために。ただし、追加のオプションは少し混乱を招く可能性があります。.

たとえば、2つのコンテナがあるとしましょう。, ＃左 そして ＃右, ドラッグ可能なアイテムをサポートしたいあなたがする必要があります これらのコンテナをDragula関数に手動で追加する ドラッグ＆ドロップ方法をサポートする.

フロントエンド開発の基本をしっかり理解していない場合は、Dragulaを使用するのに苦労します。しかし、GitHubリポジトリにはたくさんの情報があります。 あなたが一緒に従うことができる素晴らしい例 そしてさらに コピーできるコードスニペット.

以下はGitHubのドキュメントのサンプルです。 左右2つのコンテナをターゲットにする：

 dragula（[[document.querySelector（ '＃left'）、document.querySelector（ '＃right'）]）];

もしあなたがGitHubページをさらに見ればわかるでしょう 膨大な選択肢のリスト あなたはこの関数に渡すことができます.

選んでいいですよ アイテムをコピーするか移動するか, どのコンテナがドラッグされたアイテムをサポートするか そしてさらに コールバック関数 これは、次のようなさまざまなユーザーの動作を通じて機能します。

この図書館 いくつかの初期作業を取ります しかし、JavaScriptに精通しているのであれば、それは非常に簡単なはずです。.

デモページを見てください。 仕組みを見る と いくつかのコードサンプルのアイデアを入手. Dragulaは巨大なライブラリであり、それはおそらく最高のオープンソーススクリプトです。 幅広いカスタマイズでドラッグ＆ドロップを処理.