123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <style type="text/css">
- .dd {
- width:100px;
- height:100px;
- background-color:red;
- z-index:-10;
- }
- .test {
- width:50px;
- height:100px;
- background-color:yellow;
- top:200px;
- left:200px;
-
- }
- ._jsPlumb_connector{
- z-index:-9999999;
- }
- ._jsPlumb_endpoint{
- z-index:0;
- }
- </style>
- <!--[if IE]>
- <script type="text/javascript" src="../js/excanvas.js"></script>
- <![endif]-->
-
- <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
- <script type="text/javascript" src="../js/lib/mootools-1.2.4.4-more.js"></script>
- <script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
- <script type="text/javascript" src="../js/1.2.6/jsPlumb-1.2.6-RC1.js"></script>
- <script type="text/javascript" src="../js/1.2.6/jsPlumb-defaults-1.2.6-RC1.js"></script>
- <script type="text/javascript" src="../js/1.2.6/mootools.jsPlumb-1.2.6-RC1.js"></script>
- <script>
-
- window.addEvent('domready', function() {
-
-
- var exampleGreyEndpointOptions = {
- endpoint:new jsPlumb.Endpoints.Rectangle(),
- style:{ width:25, height:21, fillStyle:'#666' },
- isSource:true,maxConnections :11,
- connectorStyle : { strokeStyle:"#666" },
- isTarget:true,scope:"ex2",
- connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
- };
- var exampleGreyEndpointOptions1 = {
- endpoint:new jsPlumb.Endpoints.Dot({radius:15}),
- style:{ width:25, height:21, fillStyle:'blue' },
- isSource:true,maxConnections :11,
- connectorStyle : { strokeStyle:"blue" },
- isTarget:true,scope:"ex1",
- connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
- };
- var exampleGreyEndpointOptions2 = {
- endpoint:new jsPlumb.Endpoints.Dot({radius:25}),
- style:{ width:25, height:21, fillStyle:'green' },
- isSource:true,maxConnections :11,
- connectorStyle : { strokeStyle:"green" },
- isTarget:true,scope:"ex3",
- connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
- };
-
- jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions));
- jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"TopCenter"}, exampleGreyEndpointOptions1));
- jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"LeftMiddle"}, exampleGreyEndpointOptions2));
-
- jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions));
- jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"TopCenter"}, exampleGreyEndpointOptions1));
- jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"LeftMiddle"}, exampleGreyEndpointOptions2));
-
-
- jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions));
- jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"TopCenter"}, exampleGreyEndpointOptions1));
- jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"LeftMiddle"}, exampleGreyEndpointOptions2));
-
-
- jsPlumb.draggable($('element1'));
- jsPlumb.draggable($('element2'));
- jsPlumb.draggable($('element3'));
-
- });
-
-
-
-
- </script>
- </head>
- <body>
-
- <div id="element1" style="float:right;" class="dd">1</div>
- <div id="element2" class="dd">2</div>
- <div id="element3" class="test">3</div>
- </body>
- </html>
|