jsPlumb:让触控变得更简单的大型端点

Question

我的实现有两个元素列表，您基本上将左侧列表中的项连接到右侧列表中的项。

我们已经将端点设置为透明的，因此在桌面上，您只需将元素从一侧拖动到另一侧。

它在台式机上表现出色，但在触摸式设备上，我们需要端点完全覆盖它所连接的元素的空间，以便它能像用户预期的那样工作。因此，实际上整个元素都变成了一个端点。

我可以通过将端点设置为相同大小的矩形并锚定在中心来实现这一点，但我希望锚定在右侧/左侧。如果我锚定在右边/左边，那么我的大端点就是覆盖元素的一半。

有没有一种方法可以锚定在右边/左边，但让端点完全覆盖元素？或者以某种方式偏移端点，以便它仍然覆盖元素？

提前感谢您的帮助

顺便说一句，jsPlumb太棒了

Answer 1

您可以使用透明图像来完成此操作。我就是这么做的。

     endpoint:[ "Image", { src:"/javascript/project/img/c.png",
                                             cssClass:'node' } ]

Answer 2

如果使用jsPlumb.addEndpoint()，则可以为创建的每个端点添加额外的参数。

我从下面的一个示例中获得了以下代码：

var exampleGreyEndpointOptions = {
    endpoint:"Rectangle",
    paintStyle:{ width:25, height:21, fillStyle: color }, // size and color of the endpoint
    isSource:true,
    connectorStyle : { strokeStyle: color }, // color of the line AND the arrow
    isTarget:false,
    maxConnections:20,
    anchor: "BottomCenter"
};
var endpointOptions = {
    isTarget:true, 
    endpoint:"Dot", 
    paintStyle:{ 
        fillStyle: color                               // color of the end point
    },
    beforeDrop: function(info){
        return handleConnectionDrop(info);
    },
    dropOptions: exampleDropOptions,
    maxConnections: 20,
    anchor: "TopCenter"
};

function InitContainer(el, data) {
    elem = $(el);
    jsPlumb.addEndpoint(el, {
        uuid: elem.attr("id")+"sr"
    }, exampleGreyEndpointOptions);

    jsPlumb.addEndpoint(el, {
        uuid: elem.attr("id")+"tr",
        parameters: data // store data in the drain Endpoint
    }, endpointOptions);
    ....
}

在此函数中，我向一个元素添加了两个端点，每个端点具有不同的属性。

您遇到的实际问题是，端点的曲面需要从其位置偏移，以便它位于元素内。接口文档中提到了这一点，但我还没有找到示例：http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#Endpoint.paint

您可以更改锚点的位置，不仅可以通过文档文本(如"TopCenter")更改，还可以通过数组更改：

anchor: [0.2, 1,0,1]

尝试一下，您将能够相对于其元素定位锚点