jsPlumb使用单击而不是拖动来连接元素

我正在尝试使用jsPlumb将问题与测验中的答案联系起来。 我有大部分工作期望我希望能够单击一个问题，然后单击一个答案，而不是从一个端点拖动到另一个端点。 这是因为拖动触摸设备是乏味的。 这可能吗？

这是我的jsbin与拖动工作

这是我正在使用的jquery。

$(document).ready(function () { var targetOption = { anchor: "LeftMiddle", isSource: false, isTarget: true, reattach: true, endpoint: "Rectangle", connector: "Straight", connectorStyle: { strokeStyle: "#ccc", lineWidth: 5 }, paintStyle: { width: 20, height: 20, fillStyle: "#ccc" }, setDragAllowedWhenFull: true } var sourceOption = { tolerance: "touch", anchor: "RightMiddle", maxConnections: 1, isSource: true, isTarget: false, reattach: true, endpoint: "Rectangle", connector: "Straight", connectorStyle: { strokeStyle: "#ccc", lineWidth: 5 }, paintStyle: { width: 20, height: 20, fillStyle: "#ccc" }, setDragAllowedWhenFull: true } jsPlumb.importDefaults({ ConnectionsDetachable: true, ReattachConnections: true }); jsPlumb.addEndpoint('match1', sourceOption); jsPlumb.addEndpoint('match2', sourceOption); jsPlumb.addEndpoint('match3', sourceOption); jsPlumb.addEndpoint('match4', sourceOption); jsPlumb.addEndpoint('answer1', targetOption); jsPlumb.addEndpoint('answer2', targetOption); jsPlumb.addEndpoint('answer3', targetOption); jsPlumb.addEndpoint('answer4', targetOption); jsPlumb.draggable('match1'); jsPlumb.draggable('answer1'); }); 

Answer 1

我想如果你不需要可拖动，那么你不应该使用它，并采用正常的click = connect方法。

这是一个例子：

http://jsbin.com/ajideh/7/

基本上我做了什么：

 //current question clicked on var questionSelected = null; var questionEndpoint = null; //remember the question you clicked on $("ul.linematchitem > li").click( function () { //remove endpoint if there is one if( questionSelected !== null ) { jsPlumb.removeAllEndpoints(questionSelected); } //add new endpoint questionSelected = $(this)[0]; questionEndpoint = jsPlumb.addEndpoint(questionSelected, sourceOption); }); //now click on an answer to link it with previously selected question $("ul.linematchplace > li").click( function () { //we must have previously selected question //for this to work if( questionSelected !== null ) { //create endpoint var answer = jsPlumb.addEndpoint($(this)[0], targetOption); //link it jsPlumb.connect({ source: questionEndpoint, target: answer }); //cleanup questionSelected = null; questionEndpoint = null; } }); 

当您单击问题列表元素时 – 它会添加端点，当您单击答案元素时 – 它还会添加端点并将其与先前选择的问题相关联。

我相信这是你想做的？

PS作为旁注，为了使用户更直观，首先让问题的端点可见，这样用户就可以找出要做的事情 – 点击。 选择问题后，可用的答案端点可以弹出提示用户应单击下一步的位置。