jsPlumb Endpoint offset

Question

First of all let me say I'm kind of new to jQuery and I'm definately new to jsPlumb altough I have checked the official documentation I've not been able to get a solution to this problem.

I have 2 draggable div elements that each have an endpoint so I can connect them to each other. The problem is when I make the connection and then drag any of the div elements around the arrow image I'm using isn't properly placed where it should be (I'm using ["RightMiddle", "LeftMiddle"] for the anchors).

Is there a way to make the images stick at the middle-right (or left) side of the div elements and not get out of place?

Here's the jsFiddle link for what I have so far, and here's the code:

$(document).ready(function () {
jsPlumb.draggable($('.table'), {
    containment: '#schema'
});
var endpointOptions = {
    isSource: true,
    isTarget: true,
    endpoint: ["Image", {
        url: "http://i43.tinypic.com/1z31ac2.gif"
    }],
    style: {
        fillStyle: 'gray'
    },
    maxConnections: -1,
    connector: ["Flowchart", {
        curviness: 5
    }],
    connectorStyle: {
        lineWidth: 3,
        strokeStyle: 'gray'
    },
    anchors: ["RightMiddle", "LeftMiddle"],
    scope: "gray"
};
var ep01 = jsPlumb.addEndpoint("container0", endpointOptions);
var ep02 = jsPlumb.addEndpoint("container1", endpointOptions);
jsPlumb.connect({
    source: ep01,
    target: ep02
});

});

Answer 1

To make the images stick at the middle-right (or left) side of the div elements, instead of specifying both RightMiddle and LeftMiddle you can simply specify any one.

anchors: "RightMiddle", // For your image Right position suits the best