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

Question

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

Here is my jsbin with the dragging working

这里是我使用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

我认为如果你不需要拖动，那么你不应该使用它，并采取正常的点击=连接方法。

下面是一个例子：

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

当您单击问题列表元素 - 它增加了终点，当你点击的答案元素 - 它还添加了端点并将其与以前选择的问题连接起来。

我相信这是你想要做的吗？

P.S.作为一个方面说明，为了让用户更直观，首先让问题的端点可见，以便用户找出要做的事情 - 单击。一旦选择了问题，可用答案终结点就会弹出暗示用户应该点击下一步的地方。