3

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

1 に答える 1

4

ドラッグ可能が必要ない場合は、それを使用せず、通常のクリック=接続アプローチを使用する必要があると思います。

次に例を示します。

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 補足として、これをユーザーにとってより直感的にするために、質問のエンドポイントを最初に表示して、ユーザーが何をすべきかを理解できるようにします - クリックします。質問が選択されると、利用可能な回答エンドポイントがポップアップ表示され、ユーザーが次にクリックする場所を示唆できます。

于 2013-03-20T20:12:20.107 に答える