123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- <!doctype html>
- <html>
- <head>
- <title>jsPlumb 1.3.7 - draggable connectors experiments - YUI3</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <link rel="stylesheet" href="../css/jsPlumbDemo.css">
- <link rel="stylesheet" href="../css/draggableConnectorsDemo.css">
- </head>
- <body onunload="jsPlumb.unload();" data-demo-id="draggableConnectorsDemo" data-library="yui3">
- <div id="demo">
- <div class="window" id="window1">one<br/><br/><a href="#" class="cmdLink hide" rel="window1">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window1">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window1">detach all</a></div>
- <div class="window" id="window2">two<br/><br/><a href="#" class="cmdLink hide" rel="window2">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window2">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window2">detach all</a></div>
- <div class="window" id="window3">three<br/><br/><a href="#" class="cmdLink hide" rel="window3">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window3">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window3">detach all</a></div>
- <div class="window" id="window4">four<br/><br/><a href="#" class="cmdLink hide" rel="window4">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window4">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window4">detach all</a></div>
- </div>
-
- <div id="explanation">
- <div id="list"></div>
- <p>This is a demonstration of draggable connections. Drag from any Endpoint to similar Endpoints
- on other elements to create Connections.</p>
- <p>Blue endpoints are configured to use a <strong>beforeDrop</strong> interceptor, which is a new
- addition to jsPlumb in 1.3.7. This enables
- you to intercept a new connection and decide whether or not you wish to allow it to proceed. They are
- also configured to automatically reattach if you drag a connection off and drop it on
- the background. In SVG and VML you will see a dashed line for blue connections; this is set via CSS. </p>
- <p>Yellow endpoints are configured to use a <strong>beforeDetach</strong> interceptor, which provides
- a way to programmatically override a connection detach. Yellow connections are painted with the
- Straight connector</p>
- <p>Green endpoints support up to three Connections. Once a green endpoint has three connections, when you drag from it you will drag the oldest connection made on the endpoint.</p>
- <a id="clear" href="#">clear plumbing</a>
- <p>This demo uses jsPlumb 1.3.7, jQuery 1.6.0 and jQuery UI 1.8.13.</p>
- </div>
-
- <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
-
- <script type='text/javascript' src='../js/yui.jsPlumb-1.3.7-all-min.js'></script>
-
- <!-- demo code -->
- <script type="text/javascript" src="../js/draggableConnectorsDemo.js"></script>
- <script type="text/javascript" src="../js/draggableConnectorsDemo-yui3.js"></script>
-
- <!-- demo helper code -->
- <script type="text/javascript" src="../js/demo-list.js"></script>
- <script type="text/javascript" src="../js/demo-helper-yui3.js"></script>
-
- </body>
- </html>
|