Question

我使用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>

Answer 1

jsPlumb创建一个SVG，它可以停留在连接的元素上，防止点击触发SVG下的元素上的事件。

您可以通过在jsPlumb创建的所有SVG上附加点击事件来测试它，并检查您触发的点击。

解决方案对我有用，就是将SVG下元素的z-index更改为大于jsPlumb实例中设置的z-index的z-index。

顺便说一下，你可以用以下方法控制连接器的z-index：

jsPlumb.importDefaults（{ConnectorZIndex：number}）; // number是z-index

jsPlumb触摸事件在Web浏览器上工作但不在平板电脑浏览器上工作

1 个答案: