jsPlumb使用单击而不是拖动来连接元素 [英] jsPlumb using a click instead of dragging to connect elements

问题描述

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

I am trying to use jsPlumb to connect questions with answers in a quiz. I have most of this working expect I want to be able to click a question and then click an answer instead of dragging from an endpoint to another endpoint. This is because dragging on a touch device is tedious. Is this possible?

这是我的jsbin拖拉工作

这是我正在使用的jquery。

Here is the jquery I am using.

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

推荐答案

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

I think if you don't need draggable, then you shouldn't use it, and go with normal click=connect approach.

这是一个例子：

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

当你点击问题列表元素时 - 它会添加端点，当你点击答案元素时 - 它还添加了端点并将其与之前选择的问题联系起来。

When you click on the question list element - it adds endpoint, when you click on the answer element - it also adds endpoint and connects it with previously selected question.

我相信这是你想做的事情吗？

I believe this is what you wanted to do ?

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

P.S. As a side note, to make this more intuitive for the user, make endpoints for questions visible first, so the user would figure out what to do - click. Once question is selected, available answer endpoints can pop-up hinting where user should click next.

这篇关于jsPlumb使用单击而不是拖动来连接元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！