ドラッグ可能なdivを接続する方法

Question

私はクローンを作成し、ドラッグアンドドロップすることができるいくつかのdivを持っていますが、今度はdivで線で接続したいのですが、divを移動するとこの行も移動する必要があります。フロー図のようなもの、私はドラッグアンドドロップを使ってdivをクローンしますが、この行をどうやってやるのかまだ分かりません。

ありがとうございます！

Answer 1

私は以前これについて考えましたが、実際に実装しようとする必要はありませんでした。これを試してみてください：

透明なGIFまたはPNGを作成します。このGIFまたはPNGには、コーナーからコーナーまで対角線があります。 divをドラッグすると、画像が伸びて角が常に各divに触れるようになります。対角線上の画像と対角線上の画像が必要になり、2つのdivの相対的な位置に基づいて2つの画像を切り替える必要があります。

これはうまくいくためには多少の工夫が必要ですが、HTMLで対角線を取得するのが最も良い方法です。

Answer 2

• 2つのdivを、DIVAとDIVBを取ります。

• 各DIV 例のものと最も近い辺の中間座標を決定するdiv要素の最も近い境界間の最短距離を計算する：

  A：{X：10、Y：10}

  B：{X：20：Y：10}

• これらの点（C） C = AX、BYまたはAYからの線の交点を決定する、BXは（depen DIVAとDIVBポジションの鼎）

• ACとBCを表す2つのdiv、

先端作成：あなたはjQueryを使ってdiv要素を移動するたびに再描画

position:absolute; 
line-height:1px; 
border:solid 1px; 

を。

注：表示されているように、divが平行でないときは、常に2面が近く、2面が遠くにあります。

Answer 3

これを実現するにはjsplumbライブラリを使用できます。 div1とdiv2の2つのdivがある場合、

var endpointOptions = { isSource:true, isTarget:true }; 
var div1Endpoint = jsPlumb.addEndpoint('div1', { anchor:"TopCenter" }, endpointOptions); 
var div2Endpoint = jsPlumb.addEndpoint('div2', { anchor:"BottomCenter" }, endpointOptions); 
jsPlumb.connect({ 
    source:div1Endpoint, 
    target:div2Endpoint, 
    connector: [ "Bezier", 175 ], 
    paintStyle:{ lineWidth:5, strokeStyle:'red' } 
}); 

これでコネクタが確立されます。あなたのdivは動産であれば、その後onmove、）（jsPlumb.repaintに電話をかけるjsPlumbデモへ

リンク - https://jsplumbtoolkit.com Jsplumbは、（上記の改訂リンク）、今支払っなっているようです。しかし、彼らはCommunity Edition

コミュニティ版 を持っていますこれは、最初の初期の2010年に作成されたGitHubの上でホストされているオープンソースjsPlumbプロジェクトです。これはプログラムでもマウス/タッチイベントでもDOM要素間の接続を確立するためのAPIを提供するビューレイヤーの技術です。

コミュニティ版は無料で、MITまたはGPL2ライセンスを取得しています。あなたのニーズに合ったものを選んでください。

ツールキット版 ツールキット版は、基礎となるデータモデルに焦点を当て、ならびにこのようなレイアウトなど、いくつかの便利なUIの機能、およびパン/ズーム機能を提供していますウィジェットにCommunityエディションをラップします。これは、ビジュアル接続を中心にアプリケーションを構築するための迅速な方法を提供します。 Toolkit Editionの機能をよりよく理解するために、いくつかのデモを見たり、ドキュメントを熟読したりしてください。

Toolkit Editionには、開発者向けの商用ライセンスが含まれており、オプションで電子メールサポート（1年間の新しいリリース版の更新）が可能です。ライセンス条項はこちらから入手できます。このフォームを使用して、すぐにジャンプしてライセンスを購入してください！

両方のエディションのロードマップはhereです。