最近、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 無料インストール バージョンで遭遇した落とし穴 (コレクション)
MYSQL でよく使用されるクエリ コマンド: mysql> select version()...
<tbody> タグは、テーブル本体のスタイルを定義するために使用されます。基本構文 &...
例: mysqldump –all-databases を使用すると、すべてのライブラリがエクスポー...
CS: ...コードをコピーコードは次のとおりです。 html,body{ margin:0px; ...
1. インデックスの原則インデックスは、列内の特定の値を持つ行をすばやく見つけるために使用されます。...
データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...
表> <TR> <TD> <TH> <キャプション&...
tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...
1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...
目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...
1. SpringBoootプロジェクトを作成し、jarパッケージにパッケージ化する2. Linux...
プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...
目次1.まず、main.jsページを設定します2. 対応するパスの下で言語パックを構成します。ここに...
コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...
序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...