1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <!doctype html>
- <html>
- <head>
- <title>jsPlumb 1.3.7 - Connection Sources and Targets Demonstration - jQuery</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8" />
- <link rel="stylesheet" href="../css/jsPlumbDemo.css">
- <link rel="stylesheet" href="../css/anchorDemo.css">
- </head>
- <body onunload="jsPlumb.unload();" data-demo-id="anchorDemo" data-library="jquery">
-
- <div id="demo">
- <div class="window" id="window1"><strong>Window 1</strong><br/><br/></div>
- <div class="window smallWindow" id="window2"><strong>Window 2</strong><br/><br/></div>
- <div class="window smallWindow" id="window3"><strong>Window 3</strong><br/><br/></div>
- <div class="window smallWindow" id="window4"><strong>Window 4</strong><br/><br/></div>
- <div class="window smallWindow" id="window5"><strong>Window 5</strong><br/><br/></div>
- <div class="window smallWindow" id="window6"><strong>Window 6</strong><br/><br/></div>
- </div>
- <div id="explanation">
- <p>This page provides a demonstration of the makeSource and makeTarget functions. Drag Connections from the
- big blue element to any of the small green ones. You can also drag Connections from one green element to another, because Connections in jsPlumb
- are, by default, detachable (this behaviour can be overridden at the default level, or on a per-call basis).</p>
- <p>These functions provide an alternative means of setting up your UI to support draggable connections - in the other demos you will see Endpoints
- being created and assigned to elements, which are then used as the sources and targets for Connections. But in this demonstration we treat entire
- elements as sources and targets, and only when Connections are established do we assign Endpoints for them, according to the parameters specified in
- the makeSource and makeTarget method calls.</p>
- <p>The blue element is configured as a Connection source (and is not draggable), with a list of possible Anchor
- locations:</p>
- <div class="code">
- <pre>
- var sourceAnchors = [
- [ 0, 1, 0, 1 ],
- [ 0.25, 1, 0, 1 ],
- [ 0.5, 1, 0, 1 ],
- [ 0.75, 1, 0, 1 ],
- [ 1, 1, 0, 1 ]
- ];
- jsPlumb.makeSource("window1", {
- anchor:sourceAnchors
- });</pre>
- </div>
- The green elements are configured as Connection targets, with a "TopCenter" anchor, and are draggable:
- <div class="code">
- <pre>
- var smallWindows = jsPlumb.getSelector(".smallWindow");
- for (var i = 0; i < smallWindows.length; i++) {
- jsPlumb.draggable(smallWindows[i]);
- jsPlumb.makeTarget(smallWindows[i], {
- paintStyle: { fillStyle:'#558822' },
- anchor:"TopCenter",
- dropOptions:{ hoverClass:"hover" }
- });
- }
- </pre>
- </div>
- <p>This demonstration uses jsPlumb 1.3.7, jQuery 1.7.1 and jQuery UI 1.8.13.</p>
- </div>
-
- <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
-
- <script type='text/javascript' src='../js/jquery.jsPlumb-1.3.7-all-min.js'></script>
-
- <!-- demo code -->
- <script type="text/javascript" src="../js/anchorDemo.js"></script>
-
- <!-- demo helper code -->
- <script type="text/javascript" src="../js/demo-list.js"></script>
- <script type="text/javascript" src="../js/demo-helper-jquery.js"></script>
-
- </body>
- </html>
|