最近、Vue を使用して、ドラッグ可能なツリー構造図という小さなプロジェクトを作成しました。 Vue 再帰コンポーネントこの構造はVueの再帰コンポーネントを通じて実装されている。 レイアウトはフレックスを使用し、構造線はCSS疑似クラスによって実装されています。 注意すべき点は、中央揃えレイアウトの場合、X 軸上の要素が多すぎて子要素の幅がビューを超えてしまうと、要素が中央揃えされた後にスクロール バーはあるものの、右側のコンテンツにしか届かず、左側のコンテンツにはアクセスできなくなることです。親要素を inline-flex に設定し、幅を auto に設定することができます。もちろん、上記のような構造であれば、このような問題は発生しませんが、ビッグデータのレンダリングとなると、やはり午後は悩みました。 ドラッグイベントまず、ドラッグしたい要素にドラッグ可能な属性をバインドします。デフォルトでtrueに設定されている<a>タグと<img>タグを除き、他のすべての要素は次のように設定する必要があります。 次に、 ドラッグされた要素の値をドロップされた場所に転送するには、 方法:{ ドラッグスタート(e,nodeObj){ console.log('🐉ドラッグ移動ポイント',nodeObj.name,); let transData = JSON.stringify(nodeObj) //ドラッグによって渡されたデータはまずJSON形式に変換されます e.dataTransfer.setData("node", transData) }, ドラッグオーバー(e){ e.preventDefault() }, ドロップ(e,nodeObj){ console.log('🐉dropped to',nodeObj.name); getData = JSON.parse( e.dataTransfer.getData("node")) とします。 console.log('データを取得',getData); } } これを踏まえて、次にやるべきことは、取得したドラッグポイントデータを配置ポイントの バスフォルダを作成し、新しいindex.jsファイルを作成します。 「vue」からVueをインポートします 定数busEvent = 新しいVue({ データ(){ 戻る { dragNodeIndex:-1, //親ノードの子配列内のドラッグノードのインデックス } }, 作成された(){ this.$on("transDragNodeIndex", res=>>/$on を通じて $emit を監視するには、カスタム イベントがトリガーされる前に監視されていることを確認する必要があります。つまり、サブスクリプションがパブリッシュに先行します。そうしないと、データを監視できません。私は eventBus をあまり使用していないので、これは落とし穴です。this.dragNodeIndex=res }) } }) デフォルトの busEvent をエクスポートする コンポーネントに 次のステップは、いくつかの論理的判断を下すことです。たとえば、親ノードを子ノードにドラッグできない場合は、まず親ノード上のすべての子ノードの名前を再帰的に走査して配列に格納します。ドロップ位置の ifFatherDragToSon(dragObj,dropObj){//親ノードが子ノードに移動したかどうかを判断しますif (dragObj.children.length === 0) false を返します。 newArr = [] とします。 関数 getAllName(dragObj) { 新しいArr.push(...dragObj.children); (dragObj.children.length === 0)の場合{ 戻る; } それ以外 { (i = 0 とします; i < dragObj.children.length; i++) { getAllName(dragObj.children[i]); } } } getAllName(ドラッグオブジェクト); newArr.includes(dropObj) の場合 { true を返します。 } false を返します。 }
自分自身にドラッグしても機能せず、直接戻るだけです。 「Li Hu Chong」ポイントの下に子ノードが追加されます。これは主に、 もう一つ特筆すべきは、ドラッグイベントの コード接続 以上がVueのドラッグ可能なツリー構造図の実装の詳細内容です。Vueのツリー構造図の実装の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Mysql 5.7.19 無料インストール バージョンで遭遇した落とし穴 (コレクション)
序文Javaプログラミングでは、ほとんどのアプリケーションはMavenに基づいて構築されており、配信...
1. Vueとは何かVue は、ユーザー ページを構築するためのプログレッシブ フレームワークです。...
ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...
色はあらゆるウェブサイトにとって最も重要な要素の 1 つであり、閲覧者に大きな影響を与えるため、色の...
1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...
MySQL のデータ型は datetime です。データベースに保存されているデータは 2015-0...
ZFSの歴史Z ファイル システム (ZFS) は、2001 年に Matthew Ahrens と...
この記事では、例を使用して、MySQL 累積集計の原理と使用方法を説明します。ご参考までに、詳細は以...
Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...
Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...
1. IEブラウザを使用してVPNにログインする 2. リモートログイン 3. サーバーに最新のn...
この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...
コンテナが起動した後まず管理者にログインして新しいユーザーを作成してください $ docker ex...
目次1. これは2. この点を修正する1. call() メソッド2. apply() メソッド要約...
目次問題の原因:解決:解決:私は Centos7 を使用しています (理論的にはこの方法は Cent...