1

ユーザーが階層的なフローチャートを作成するための webtool を作成しようとしています。新しいドラッグ可能な接続の範囲を視覚化しようとしています。

各ノードには下部に「開始点」があり、上部で接続を受け取ることができます。（これは階層構造を強化するためです）。今私のjsfiddleで

http://jsfiddle.net/SCSaf/

「始点」は四角形で、「終点」は点として見ることができます。四角形から接続をドラッグし始めると、四角形が表示されますが、これは Dot に接続する必要があるため奇妙です。それが私の問題を解決するので、私はこれを変更することにしました。私はそれを正しく理解できませんでした。このビットを変更してみました：

var exampleGreyEndpointOptions = {
    endpoint:"Rectangle",
    paintStyle:{ width:25, height:21, fillStyle:'#666' },
    isSource:true,
    connectorStyle : { strokeStyle:"#666" },
    isTarget:false,
    maxConnections:5
};

connectorStyle は「矢印」のみを変更します。矢印の先端の四角形を変更するオプションが見つかりません。

もう 1 つのオプションは、ドラッグ可能の jsPlumb デモに似たものです。

http://jsplumbtoolkit.com/draggableConnectors/jquery.html

ここでは、ドラッグスタートで受信ノードに赤い点線が表示されることがわかります。同様のスタイリングを「エンドポイント」に適用できれば、それも問題ありません。この例の問題点は、他のノード/コンテナーからの「開始点」も強調表示されることです。（接続できません）明確にするために、jsfiddleは思い通りに機能しますが、ビジュアルだけが少し混乱しています。お役に立てれば幸いです。

4

1 に答える 1

1

私はこれを試したと確信していますが、今ではうまくいきました：

CSS を追加します。

.dragActive {
    border: 2px dotted orange;
}

次のような変数:

var exampleDropOptions = {
    tolerance:"touch",
    hoverClass:"dropHover",
    activeClass:"dragActive"
};

それに応じて endpointOptions を変更します。

var endpointOptions = {
    // ....
    dropOptions: exampleDropOptions
}

これが更新された JS-fiddle です。動作します！ http://jsfiddle.net/SCSaf/1/

于 2013-08-20T07:32:16.450 に答える