Question

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

我们已将端点设置为透明，因此在桌面上看起来就像是从一侧的元素拖到另一侧。

它在桌面上运行得非常出色，但在触摸设备上，我们需要端点准确覆盖它所连接的元素的空间，以便它能够像用户期望的那样工作。所以实际上整个元素就成了一个终点。

我可以通过使端点成为相同大小的矩形并锚定在中心来实现此目的，但我想在右侧/左侧锚定。如果我在右侧/左侧锚定，那么我的大型终点就会覆盖该元素。

有没有一种方法可以在右侧/左侧锚定，但是端点是否完全覆盖了元素？或以某种方式抵消端点，以便它仍然覆盖元素？

提前感谢您提供任何帮助

Btw 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);
    ....
}

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

您遇到的实际问题是端点的表面需要偏离其位置，以使其位于元素内。这在API文档中提到过，但我还没有找到示例： http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#Endpoint.paint

您可以更改锚点的位置，不仅可以通过文档记录的文本（如“TopCenter”），还可以通过数组更改：

anchor: [0.2, 1,0,1]

尝试一下，你将能够相对于它的元素定位锚点

jsPlumb：大型端点，使触摸更容易

2 个答案: