show connection drop options in jsPlumb chart

Question

I'm trying to make a webtool for users to make a flow chart, which is hierachical. I'm trying to visualize the scope for new draggable connections.

Each node has 'startpoints' on the bottom and can receive connections on the top. (this to enhance the hierarchical structure). Now in my jsfiddle

http://jsfiddle.net/SCSaf/

You can see the 'startpoints' as a square and the 'endpoints' as a Dot. If you start dragging a connection from a square, you see a square, which is odd since it should connect to a Dot. I tied to change this, since that would solve my problem. I couldn't get it right. I tried changing this bit:

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

connectorStyle changes only 'the arrow', I can't find an option to change the square on the tip of the Arrow.

The other option is something similar to the jsPlumb demo for draggable:

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

Here you can see that on a dragstart, the receiving nodes get a red dotted line. If I could apply similar styling to the 'endpoints' that would also be OK. The problem with this example is that it would also highlight 'startpoints' from other nodes/containers. (to which it can not connect) To be clear, the jsfiddle works as I want, only the Visuals are a bit confusing. Hope you can help.

Answer 1

I quite sure I tried this, but now I got it working:

add CSS:

.dragActive {
    border: 2px dotted orange;
}

a var like:

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

and change the endpointOptions accordingly:

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

here's the updated JS-fiddle. Works! http://jsfiddle.net/SCSaf/1/