How to implement drag and connect feature provided by Rappid with pure JointJS? - jointjs

Question

There is a feature in Rappid (the paid version of JointJS) which allows you to drag a button from the toolbox of an element and connect that element to another element where you release your mouse button.
I want to implement this feature with JointJS core library. I've managed to create a tool box with elementTools and added two buttons, one for removing the element and one for this drag and connect feature.
The Picture of element with element toolbox
The problem is the button for drag fires only when I click on the button. It doesn't allow me to drag and have x, y coordinates of the mouse.
There is a similar question which was left unanswered in stackoverflow:
Creating a ToolElement for every object JointJS
Here is my snippet for the button:
const InfoButton = joint.elementTools.Button.extend({
name: 'info-button',
options: {
focusOpacity: 0.5,
distance: 60,
action: function (evt: JQueryEventObject, elementView, buttonView) {
// alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
const link = new Models.SequenceFlow();
link.set('source', { id: elementView.model.get('id') });
link.set('target', new joint.g.Point(evt.pageX, evt.pageY));
// const alev = jQuery.Event()
// evt.preventDefault();
// paper.trigger('AliEvt', evt);
link.addTo(model);
// link.se(this.model);
// link.target(new joint.g.Point(0, 0));
},
markup: [
{
tagName: 'circle',
selector: 'button',
attributes: {
r: 7,
fill: '#001DFF',
cursor: 'pointer',
},
},
{
tagName: 'path',
selector: 'icon',
attributes: {
d: 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
fill: 'none',
stroke: '#FFFFFF',
'stroke-width': 2,
'pointer-events': 'none',
},
},
],
},
});
const infoButton = new InfoButton();
const toolsView = new joint.dia.ToolsView({
name: 'basic-tools',
tools: [removeButton, boundaryTool, infoButton],
});
Any help would be appreciated.