1

ドラッグアンドドロップ機能を使用したjsplumbを使用して、列テンプレートを一致させました。すべてが Web ブラウザーで正常に動作しています。しかし、タブレットブラウザで同じものを実行しても機能しません。touchpunch の使用を提案しているフォーラムを読みました。私もそれを使いました。しかし、他の列と一致するように円をタップすると、移動しません。どこが間違っているか教えてください。私が使用したコードスニペットは次のとおりです。

main.js

function display()
{                
    var questiontxt = xmlDoc.getElementsByTagName("questionTxt")[0].childNodes[0].nodeValue;

    $("#topmain").html(questiontxt);

    fitemid= x[0].getElementsByTagName("item").length;
    ftargetid= x[0].getElementsByTagName("target").length;
    $("#listitem").append('<table cellspacing="5" cellpadding="8" style="width: 95%; " id="list"></table>');
    connections = [];

    jsPlumb.importDefaults({
        ConnectionsDetachable:true,
        ReattachConnections:true
    });

    updateConnections = function(conn, remove) {
        connections.push(conn);
        hideConnectionInfo(connections[0].sourceId);
    };

    window.jsPlumbDemo = {
        init : function() {
            var exampleDropOptions = {
                tolerance:"touch",
                hoverClass:"dropHover",
                activeClass:"dragActive"
            };

            var color2 = "#FFF";
            var color3 = "#09F";
            var exampleEndpoint2 = {
                tolerance:"touch",
                hoverClass:"dropHover",
                activeClass:"dragActive",
                endpoint:["Dot", { radius:15 }],
                paintStyle:{ fillStyle:color3 },
                isSource:true,
                scope:"green dot",
                connectorStyle:{ strokeStyle:color3, lineWidth:2 },
                maxConnections:1,
                connector: "Straight",
                isTarget:false
            };

            var exampleEndpoint3 = {
                endpoint:["Dot", { radius:15}],
                paintStyle:{ fillStyle:color3 },
                isSource:false,
                scope:"green dot",
                connectorStyle:{ strokeStyle:color3, lineWidth:2 },
                maxConnections:1,
                connector: "Straight",
                isTarget:true,
                beforeDrop:function(params) { 
                    var v=(params.sourceId).substring(6,(params.sourceId).length);
                    var w=(params.targetId).substring(12,(params.targetId).length);

                    if(v == w){
                        document.getElementById('ans'+w).innerHTML+="<img src='img/correct.png'>";
                        count++;
                        c = xmlDoc.getElementsByTagName("item").length;

                        if(count == c){
                            feedback();
                            alert(window.parent)
                            window.parent.updateResult(100)
                        }
                        return confirm(); 
                        dropOptions : exampleDropOptions    

                    }
                }
            };

            jsPlumb.bind("connection", function(info, originalEvent) {
                updateConnections(info.connection);
            });

            jsPlumb.bind("connectionDetached", function(info, originalEvent) {
                updateConnections(info.connection, true);
            });

            function Shuffle(o) {
                for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
                    return o;
                };

            var testArray = new Array();
            var testArray1 = new Array();

            for(i=0 ; i< fitemid ;i++){
                testArray.push(i);
            }
            Shuffle(testArray);

            for(i=0 ; i< fitemid ;i++){
                testArray1.push(i);
            }
            Shuffle(testArray1);

            for(i=0 ; i< fitemid ;i++)
            {
                fitem[i] = x[0].getElementsByTagName("item")[testArray1[i]].childNodes[0].nodeValue;
                ftarget[i] = x[0].getElementsByTagName("target")[testArray[i]].childNodes[0].nodeValue;

                j = x[0].getElementsByTagName("item")[testArray1[i]].getAttribute("target");
                l = x[0].getElementsByTagName("target")[testArray[i]].getAttribute("id");

                $("#list").append("<tr style='width:100%;'><td id=\"circle"+j+"\" class='circle ,\"circle"+j+"\' style='width:65%; vertical-align: top; border:1px #999 solid; float:left; border-radius:4px;'>"+fitem[i]+"</td> <td id=\"circletarget"+l+"\" class='circletarget,\"circle"+j+"\' style='vertical-align: top; width:59%; border:1px #999 solid; border-radius:4px;'>"+ftarget[i]+"</td><td class='circletarget,\"circle"+j+"\' style='vertical-align: top; width:5%;'><div id=\"ans"+l+"\" class='ans'></td></tr>");

                var e1 = jsPlumb.addEndpoint("circle"+j, { anchor:[1, 0.5, 1, 1 ] }, exampleEndpoint2);
                var e2 = jsPlumb.addEndpoint("circletarget"+l, { anchor:[ 0, 0.5, 1, 1 ] }, exampleEndpoint3);

                jsPlumb.draggable($("#circle"+j,"#circletarget"+l));
            }   
        }       
    };  
    jsPlumbDemo.init(); 
}

index.html

<html>
<head>
<script src="js/lib/jquery.min.js"></script>

        <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
                 <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script>
        <script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script>

        <script src="js/lib/jquery.ui.touch-punch.js" ></script>

        <script src="js/lib/jsBezier-0.5.js"></script>      
        <!-- jsplumb util -->
        <script src="js/1.4.0/jsPlumb-util-1.4.0-RC1.js"></script>
        <!-- base DOM adapter -->
        <script src="js/1.4.0/jsPlumb-dom-adapter-1.4.0-RC1.js"></script>
        <!-- jsplumb drag-->
        <!--<script src="js/1.4.0/jsPlumb-drag-1.4.0-RC1.js"></script>-->
        <!-- main jsplumb engine -->
        <script src="js/1.4.0/jsPlumb-1.4.0-RC1.js"></script>
        <!-- connectors, endpoint and overlays  -->
        <script src="js/1.4.0/jsPlumb-defaults-1.4.0-RC1.js"></script>
        <!-- SVG renderer -->
        <script src="js/1.4.0/jsPlumb-renderers-svg-1.4.0-RC1.js"></script>
        <!-- canvas renderer -->
        <script src="js/1.4.0/jsPlumb-renderers-canvas-1.4.0-RC1.js"></script>
        <!-- vml renderer -->
        <script src="js/1.4.0/jsPlumb-renderers-vml-1.4.0-RC1.js"></script>

        <!-- jquery jsPlumb adapter -->
        <script src="js/1.4.0/jquery.jsPlumb-1.4.0-RC1.js"></script>

</head>

    <body>

 <div id="content" class="content">         

                <div id="topmain"></div>
                <div id="listitem"></div>
            </div>

 </body>

    <script src="js/main.js"></script>



</html>
4

1 に答える 1

0

jsPlumb は、接続された要素の上にとどまることができる SVG を作成し、クリックが SVG の下の要素でイベントをトリガーするのを防ぎます。

jsPlumb によって作成されたすべての SVG にクリック イベントを添付してテストし、それをトリガーするクリックを確認できます。

私にとってうまくいった解決策は、SVG の下の要素の z-index を、jsPlumb のインスタンスで設定された z-index よりも大きい z-index に変更することでした。

ところで、次の方法でコネクタの z-index を制御できます。

jsPlumb.importDefaults({ ConnectorZIndex: 数値 }); //number は z-index です

于 2013-02-16T20:58:23.247 に答える