在jsPlumb圖表中顯示連接拖放選項

我正在嘗試爲用戶製作一個webtool來製作流程圖，這是分級的。我試圖想象新的可拖動連接的範圍。在jsPlumb圖表中顯示連接拖放選項

每個節點的底部都有'startpoints'，並且可以接收頂部的連接。（這是爲了增強分層結構）。現在，在我的jsfiddle

你可以看到「startpoints」作爲一個正方形和「終點」作爲一個點。如果你開始從一個正方形拖拽一個連接，你會看到一個正方形，因爲它應該連接到一個點，所以很奇怪。我想要改變這一點，因爲那樣可以解決我的問題。我無法理解。我試圖改變這一點：只有

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

connectorStyle變化「箭頭」，我找不到一個選項，以改變上的箭頭尖端的廣場。

另一種選擇是類似jsPlumb演示了可拖動的東西：

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

在這裏你可以看到，爲dragStart，接收節點得到一個紅色虛線。如果我可以對「端點」應用類似的樣式，那也可以。這個例子的問題在於，它還會突出顯示其他節點/容器的「開始點」。（無法連接）要清楚，jsfiddle按我的意願工作，只有Visuals有點混亂。希望你能幫助。

來源

2013-08-19 Jeroen

我很確定我想這一點，但現在我得到它的工作：

添加CSS：

.dragActive { 
    border: 2px dotted orange; 
}

一個變種，如：

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

，並相應地改變endpointOptions：

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

這裏'是更新的JS小提琴。作品！ http://jsfiddle.net/SCSaf/1/

來源

2013-08-20 07:32:16 Jeroen

在jsPlumb圖表中顯示連接拖放選項

回答

相關問題