123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <!doctype html>
- <html>
- <head>
- <style>
- #demo {
- overflow:scroll;
- margin-top:5em;
- }
-
- .w {
- width:5em;
- padding:1em;
- position:absolute;
- border: 1px solid black;
- z-index:4;
- border-radius:1em;
- border:1px solid #346789;
- box-shadow: 2px 2px 19px #e0e0e0;
- -o-box-shadow: 2px 2px 19px #e0e0e0;
- -webkit-box-shadow: 2px 2px 19px #e0e0e0;
- -moz-box-shadow: 2px 2px 19px #e0e0e0;
- -moz-border-radius:0.5em;
- border-radius:0.5em;
- opacity:0.8;
- filter:alpha(opacity=80);
- cursor:move;
- }
-
- .aLabel {
- background-color:white;
- opacity:0.8;
- padding:0.3em;
- }
-
- .ep {
- float:right;
- width:1em;
- height:1em;
- background-color:#994466;
- cursor:pointer;
- }
-
- ._jsPlumb_endpoint {
- z-index:3;
- }
- /* ._jsPlumb_connector { border:1px solid red; }*/
-
- #opened {
- left:10em;
- top:5em;
- }
-
- #olga {
- left:10em;
- top:12em;
- width:7em;
- }
- #nicola {
- left:13em;
- top:25em;
- }
- #inperson {
- left:27em;
- top:22em;
- }
- #rejected {
- left:10em;
- top:35em;
- }
- .dragHover { border:1px dotted red; }
-
- path { cursor:pointer; }
- </style>
- </head>
- <body>
- <div style="position:absolute">
- <div id="demo">
- <div class="w" id="opened">opened<div class="ep"></div></div>
- <div class="w" id="olga">telephone interview with olga<div class="ep"></div></div>
- <div class="w" id="nicola">telephone interview with nicola<div class="ep"></div></div>
- <div class="w" id="inperson">in person<div class="ep"></div></div>
- <div class="w" id="rejected">rejected<div class="ep"></div></div>
- </div>
- </div>
-
- <script type="text/javascript" src="jquery-1.6.3.js"></script>
- <script type="text/javascript" src="jqueryui-1.8.13.js"></script>
- <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
- <!-- main jsplumb engine -->
- <script type="text/javascript" src="../../js/1.3.4/jsPlumb-1.3.4-RC1.js"></script>
- <!-- connectors, endpoint and overlays -->
- <script type="text/javascript" src="../../js/1.3.4/jsPlumb-defaults-1.3.4-RC1.js"></script>
-
- <!-- state machine connectors -->
- <script type="text/javascript" src="../../js/1.3.4/jsPlumb-connectors-statemachine-1.3.4-RC1.js"></script>
-
- <!-- SVG renderer -->
- <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-svg-1.3.4-RC1.js"></script>
- <!-- canvas renderer -->
- <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-canvas-1.3.4-RC1.js"></script>
- <!-- vml renderer -->
- <script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-vml-1.3.4-RC1.js"></script>
- <!-- jquery jsPlumb adapter -->
- <script type="text/javascript" src="../../js/1.3.4/jquery.jsPlumb-1.3.4-RC1.js"></script>
- <script type="text/javascript" src="../../js/1.3.4/jsPlumb-fx-0.1-RC1.js"></script>
-
- <script>
-
-
- var curColourIndex = 1, maxColourIndex = 24, nextColour = function() {
- var R,G,B;
- R = parseInt(128+Math.sin((curColourIndex*3+0)*1.3)*128);
- G = parseInt(128+Math.sin((curColourIndex*3+1)*1.3)*128);
- B = parseInt(128+Math.sin((curColourIndex*3+2)*1.3)*128);
- curColourIndex = curColourIndex + 1;
- if (curColourIndex > maxColourIndex) curColourIndex = 1;
- return "rgb(" + R + "," + G + "," + B + ")";
- };
-
- jsPlumb.ready(function() {
-
- jsPlumb.setRenderMode(jsPlumb.SVG);
-
- jsPlumb.logEnabled = true;
- jsPlumb.setDebugLog(function(m) {
- $("#debug").html(m);
- });
-
- jsPlumb.Defaults.Connector = [ "StateMachine", { avoidSelector:$(".w") } ];
- jsPlumb.Defaults.Endpoint = ["Dot", {radius:2}];
- jsPlumb.Defaults.HoverPaintStyle = {strokeStyle:"yellow", lineWidth:2 };
- jsPlumb.Defaults.Overlays = [
- [ "Arrow", {
- location:1,
- id:"arrow"
- } ]/*,
- [ "Arrow", {
- location:0.5,
- id:"arrow2"
- } ] */
- ];
-
- jsPlumb.draggable(jsPlumb.CurrentLibrary.getSelector(".w"));
-
- jsPlumb.bind("click", function(c) {
- jsPlumb.detach(c);
- });
-
- // make each ".ep" div a source and give it some parameters to work with. here we tell it
- // to use a Continuous anchor and the StateMachine connectors, and also we give it the
- // connector's paint style. note that in this demo the strokeStyle is dynamically generated,
- // which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i
- // would recommend you do.
- $(".ep").each(function(i,e) {
- var p = $(e).parent();
- jsPlumb.makeSource($(e), {
- parent:p,
- endpoint:{
- anchor:"Continuous",
- connector:"StateMachine",
- connectorStyle:{ strokeStyle:nextColour(),lineWidth:2 },
- maxConnections:-1
- }
- });
- });
-
- jsPlumb.makeTarget($(".w"), {
- dropOptions:{ hoverClass:"dragHover" },
- endpoint:{
- anchor:"Continuous"
- }
- });
- });
- </script>
- </body>
- </html>
|