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

в этой функции я добавил две конечные точки к одному элементу, каждый с разными атрибутами.

Фактическая проблема, с которой вы столкнулись, заключается в том, что поверхность конечной точки должна быть смещена относительно ее положения, чтобы она находилась внутри элемента. Это упоминается в документации по API, но я пока не нашел пример: http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html

Вы можете изменить положение якоря не только с помощью документированного текста (например, "TopCenter"), но и с помощью массива:

anchor: [0.2, 1,0,1]

Попробуйте, вы сможете расположить якорь относительно его элемента