jsPlumb makeSource draggable move bug

Question

I found a problem when setting the MapSource connectors.

In jsFiddle code, click on "Reverse" to plot again. When you try to move a div, notice that the background of the DIV it is with an open connector.

Commenting the following code:

instancia.makeSource(elem.pageSourceId, {
  paintStyle:{ fillStyle:"transparent" },
  //hoverPaintStyle: endpointHoverStyle,
  //connectorPaintStyle: connectorPaintStyle,
  //connectorHoverPaintStyle: connectorHoverStyle
});

This bug does not happen anymore, but I need this code to maintain the original style. Anyone have any idea what it might be?

https://jsfiddle.net/braziel/dvhh7hvg/

Answer 1

Please read carefully Creating an Endpoint to understand what happens:

Endpoints are created in a number of different ways:

1. jsPlumb.makeSource(...) - Makes some DOM element(s) a Connection source, allowing you to drag connections from it/them without having to first register any Endpoints. jsPlumb.makeTarget(...) - Makes some DOM element(s) a Connection target, allowing you to drag connections to it/them without having to first register any Endpoints.

2. jsPlumb.connect(...) - Establishes a Connection between two elements (or Endpoints, which are themselves registered to elements).

3. jsPlumb.addEndpoint(...) - Adds an Endpoint to a given element or elements.

You try to use all the methods in your example and as result you are creating a lot of endpoints wich you can't control. My suggestion is to choose only one way and use it.