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

javascript jquery jsplumb
person Bertine    schedule 15.03.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я думаю, что если вам не нужно перетаскивание, вам не следует его использовать и использовать обычный подход 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;
    }
});

При нажатии на элемент списка вопросов - добавляется конечная точка, при нажатии на элемент ответа - также добавляется конечная точка и связывает ее с ранее выбранным вопросом.

Я полагаю, это то, что вы хотели сделать?

нажмите, чтобы подключиться

P.S. В качестве примечания, чтобы сделать это более интуитивно понятным для пользователя, сначала сделайте конечные точки для вопросов видимыми, чтобы пользователь понял, что делать - щелкнуть. После того, как вопрос выбран, доступные конечные точки ответа могут всплывать, подсказывая, где пользователь должен нажать «Далее».

person DMINATOR    schedule 20.03.2013
comment
Чувак, кажется, я был так увлечен jsPlumb, что даже не подумал об этом. Великолепно! - person Bertine; 22.03.2013
comment
Возможно ли, что после того, как вы нажмете на вопрос, соединение останется с вашей мышью, пока вы не прикрепите его к ответу? - person peipst9lker; 13.09.2013