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. В качестве дополнительной заметки, чтобы сделать это более интуитивно понятным для пользователя, сначала создайте конечные точки для видимых вопросов, чтобы пользователь понял, что делать - нажмите. Когда вопрос будет выбран, доступные конечные точки ответа могут всплывать, когда пользователь должен щелкнуть дальше.