LIST ONE

  • item one
  • item two
  • item three
  • item four
  • item five
  • item six
  • item seven
  • item eight
  • item nine
  • item ten
  • item eleven
  • item twelve
  • item thirteen
  • item fourteen
  • item fifteen
  • item sixteen
  • item seventeen
  • item eighteen
  • item nineteen
  • item twenty
  • item twenty one
  • item twenty two
  • item twenty three
  • item twenty four
  • item twenty five
  • item twenty six
  • item twenty seven
  • item twenty eight
  • item twenty nine
  • item thirty
  • item thirty one
  • item thirty two
  • item thirty three
  • item thirty four

LIST TWO

  • item one
  • item two
  • item three
  • item four
  • item five
  • item six
  • item seven
  • item eight
  • item nine
  • item ten
  • item eleven
  • item twelve
  • item thirteen
  • item fourteen
  • item fifteen
  • item sixteen
  • item seventeen
  • item eighteen
  • item nineteen
  • item twenty
  • item twenty one
  • item twenty two
  • item twenty three
  • item twenty four
  • item twenty five
  • item twenty six
  • item twenty seven
  • item twenty eight
  • item twenty nine
  • item thirty
  • item thirty one
  • item thirty two
  • item thirty three
  • item thirty four

List items

Demonstrates how to connect items in lists.

The list on the left is configured manually via an `addList` call on the jsPlumb instance: 

instance.addList(list1Ul, {
    endpoint:["Rectangle", {width:20, height:20}]
});

The list on the right is configured automatically because it has a `jtk-scrollable-list` attribute set in the DOM. This list's placeholder endpoint is configured via the `ListStyle` default on the instance: 

var instance = jsPlumb.getInstance({
    Connector: "Straight",
    PaintStyle: { strokeWidth: 3, stroke: "#ffa500", "dashstyle": "2 4" },
    Endpoint: [ "Dot", { radius: 5 } ],
    EndpointStyle: { fill: "#ffa500" },
    Container: "canvas",
    ListStyle:{
        endpoint:[ "Rectangle", { width:30, height:30 }]
    }
});

When you scroll a list and a connected item inside of it leaves the list's viewport, any connections to that item are stacked on a placeholder endpoint on the list element. You can control the location of the anchor used, and the appearance of the endpoint, in the options to the addList method call and in the `ListStyle` default for the instance.

Uncheck/check these to see the difference between a configured list and the default setup.