jsplumb - 當滾動出視圖時隱藏連接器

我們希望使用jsplumb在兩個並行滾動列表中的項目之間繪製鏈接 - 例如，在overflow = auto的div中。如果鏈接了兩個項目，那麼列表將滾動，以便其中一個滾動到視圖外，div外部的jsplumb鏈接的部分仍然被繪製。下面是一個例子頁面（需要一個jQuery的js文件和jsplumb JS在同一個目錄下的文件，按照腳本包括所示）：jsplumb - 當滾動出視圖時隱藏連接器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <script src="jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="jquery.jsPlumb-1.3.8-all-min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 


     $(function() { 

      $('#leftdiv').scroll(function() { 
       jsPlumb.repaintEverything(); 
      }); 

      $('#rightdiv').scroll(function() { 
       jsPlumb.repaintEverything(); 
      }); 

      jsPlumb.importDefaults({ 
       // default drag options 
       DragOptions: { cursor: 'pointer', zIndex: 2000 }, 
       EndpointStyles: [{ fillStyle: '#225588' }, { fillStyle: '#558822'}], 
       Endpoints: [["Dot", { radius: 2}], ["Dot", { radius: 2}]] 
      }); 
      var allSourceEndpoints = [], allTargetEndpoints = []; 
      var connectorPaintStyle = { 
       lineWidth: 2, 
       strokeStyle: "#deea18", 
       joinstyle: "round" 
      }, 
      // .. and this is the hover style. 
      connectorHoverStyle = { 
       lineWidth: 2, 
       strokeStyle: "#2e2aF8" 
      }; 
      var sourceEndpoint = { 
       endpoint: "Dot", 
       paintStyle: { fillStyle: "#225588", radius: 2 }, 
       isSource: true, 
       connector: ["Straight", { stub: 40}], 
       connectorStyle: connectorPaintStyle, 
       hoverPaintStyle: connectorHoverStyle, 
       connectorHoverStyle: connectorHoverStyle, 
       dragOptions: {} 
      }; 
      var targetEndpoint = { 
       endpoint: "Dot", 
       paintStyle: { fillStyle: "#558822", radius: 2 }, 
       hoverPaintStyle: connectorHoverStyle, 
       maxConnections: -1, 
       dropOptions: { hoverClass: "hover", activeClass: "active" }, 
       isTarget: true 
      }; 

      _addEndpoints = function (toId, sourceAnchors, targetAnchors) { 
       if (sourceAnchors) 
        for (var i = 0; i < sourceAnchors.length; i++) { 
         var sourceUUID = toId + sourceAnchors[i]; 
         allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor: sourceAnchors[i], uuid: sourceUUID })); 
        } 
       if (targetAnchors) 
        for (var j = 0; j < targetAnchors.length; j++) { 
         var targetUUID = toId + targetAnchors[j]; 
         allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor: targetAnchors[j], uuid: targetUUID })); 
        } 
      }; 

      _addEndpoints("plumbleft", ["RightMiddle"]); 
      _addEndpoints("plumbright", null, ["LeftMiddle"]); 

      jsPlumb.connect({ uuids: ["plumbleftRightMiddle", "plumbrightLeftMiddle"] }); 


     }); 

    </script> 

</head> 
<body> 
    <div style="height: 100px"> 
    </div> 
    <table > 
     <tr > 
      <td > 
       <div id="leftdiv" style="height: 200px; overflow: auto; "> 
        Here's some longer text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        <span id="plumbleft">linked</span><br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
       </div> 
      </td> 
      <td> 
       <div id="rightdiv" style="height: 200px; overflow: auto"> 
        Here's some longer text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        <span id="plumbright">linked</span><br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
        Here's some text<br /> 
       </div> 
      </td> 
     </tr> 
    </table> 

</body> 
</html>

我們已經嘗試了各種z-index的招數夾/隱藏線（或部分行）不應該顯示，但沒有任何運氣。任何人都可以建議如何處理它，或建議另一種方法，使用jsplumb或其他？

在此先感謝您的任何想法。

來源

2012-05-20 Peter

我從你的代碼中創建一個的jsfiddle：

http://jsfiddle.net/sporritt/fpbqd/10/

..它可以做你想做的。但是你必須讓這個mask div完全定位，這可能會在你的最終用戶界面中變得棘手。無論如何。這可能有點冒險，但可以完成。

來源

2012-06-09 23:23:55

考慮兩個不同表格的項目之間是否存在連接（可拖動）。在這種情況下，不可能隱藏連接。 – MrNobody

jsplumb - 當滾動出視圖時隱藏連接器

回答

相關問題