jsplumb - скрыть коннекторы при прокрутке из окна

Мы надеемся использовать jsplumb для рисования связей между элементами в двух параллельных прокручиваемых списках - скажем, в div с переполнением = авто. Если два элемента связаны, тогда список прокручивается так, что один из них прокручивается вне поля зрения, часть ссылки jsplumb, которая находится вне div, по-прежнему рисуется. Ниже приведен пример страница (необходимо файл и jsplumb JQuery файл расслоения плотного в расслоении плотного ту же директорию, что и за сценарий включает показано):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-индекс для клипа/скрыть строки (или части строк), которые не должны отображаться, но без везения. Может ли кто-нибудь предложить, как с этим бороться, или предложить другой подход, используя jsplumb или иначе?

Заранее благодарим за любые мысли.

источник

2012-05-20 Peter

я создал jsFiddle из кода:

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

..Это можно сделать то, что вы хотите. Но вы должны сделать эту маску абсолютно абсолютно позитивной, что может оказаться сложным в вашем конечном интерфейсе. Так или иначе. Возможно, это немного взломано, но это можно сделать.

источник

2012-06-09 23:23:55

Рассмотрите, существует ли связь между элементами двух разных таблиц (перетаскивается). В этом случае невозможно скрыть соединения. – MrNobody

jsplumb - скрыть коннекторы при прокрутке из окна

ответ

Смежные вопросы