0

jsplumb API を使用して、1 つのツリー構造を作成しています。親が に項目をドロップすると、実行時に親 div の位置に応じて jquery によってさらに 2 つの div が作成されます。

   <div id="win" style="overflow: scroll">
        <div id="rootNode">Drag New item Here</div>
    </div>

アイテムをドラッグした後、2 つの div が作成しています

    //getting postion of parent node
        var left= parseInt((document.getElementById("node").style.left).replace("px",""));
        var top= parseInt((document.getElementById("node").style.top).replace("px",""));
    var idValue = //clicked node id which contains "node"
    Left child:     
    $("#win").append("<div id='"+idValue+"1' class='window droppable' style='left:"+(left-150)+"px; top:"+(top+80)+"px'>Drag New item Here</div>");

    Right Child:
    $("#win").append("<div id='"+idValue+"2' class='window droppable' style='left:"+(left+150)+"px; top:"+(top+80)+"px'>Drag New item Here</div>");

#winすべての div はdiv内で作成されています

問題: アイテムをドロップした後、2 つの子が作成されています。右の子が#windiv の幅を超えている場合、srcoll が表示されます。ただし、左の子が div の幅を横切っている場合#win(現在のノードの左側を作成しているため左側)、左の子 div に対して水平スクロールが機能しません。左ノードは - 値の css.left でどこかに作成しています。スクロールバーを使用しても表示されないのはそのためです。スクロールバーは値からではなく0から始まるため、左の子ノードが見つかりません。

4

1 に答える 1

0

left-150<0以下のように、すべての要素を右にシフトすることで問題を解決しました

    var left= parseInt((document.getElementById(idValue).style.left).replace("px",""));
    //left is clicked element's left css value

    if((left-150)<0){
            var leftShift=0-(left-150);
            $('[id^='+"node" + ']').css("left","+="+leftShift);
            //showTree();
    }

left既存および新規作成されたすべてのノードのcss プロパティに 150 を追加しました。

于 2016-08-24T16:22:46.483 に答える