123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <!doctype html>
- <html>
- <head>
- <title>animated draggable connectors demonstration</title>
- <meta http-equiv="X-UA-Compatible" content="IE=7">
- <link rel="stylesheet" href="/mp.css"></link>
- <link rel="stylesheet" href="../css/jsPlumbDemo.css"></link>
- <style type="text/css">
- ._jsPlumb_endpoint { z-index:50; cursor:move; }
- ._jsPlumb_connector { z-index:1; }
- .bigdot { cursor:pointer;width:162px; height:162px; background-image:url(../img/bigdot.png); z-index:5; position:absolute; }
- .bigdot-hover { border:1px dotted orange; }
- .cmd { padding:0.3em; }
- .cmd:hover { background-color:yellow; }
- .dropHover { border:1px dotted orange; }
- #bd1 { top:10em;left:26em;}
- #bd2 { top:3em;left:3em;}
- #bd3 { top:19em;left:4.5em;}
- #bd4 { top:17em;left:46em;}
- #explanation { width:50%; background-color:transparent;z-index:2;color:gray;border:none;position:relative;left:45%;right:auto;text-align:center;}
- .bigdot { text-align:center; }
- .bigdot a { color:red; font-size:0.9em; }
- </style>
- </head>
- <body onunload="jsPlumb.unload();">
- <div class="menu"><a href="demo.html" class="mplink">jsPlumb home</a> | <a href="../doc/usage.html" class="mplink">view documentation</a> | <a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a> | <a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a></div>
- <div class="bigdot" id="bd1"><a class="remove-endpoints" rel="bd1" href="javascript://nop();">remove endpoints</a></div>
- <div class="bigdot" id="bd2"><a class="remove-endpoints" rel="bd2" href="javascript://nop();">remove endpoints</a></div>
- <div class="bigdot" id="bd3"><a class="remove-endpoints" rel="bd3" href="javascript://nop();">remove endpoints</a></div>
- <div class="bigdot" id="bd4"><a class="remove-endpoints" rel="bd4" href="javascript://nop();">remove endpoints</a></div>
- <div id="explanation">
- <p>this demo uses jsPlumb 1.1.0.</p>
- <p>drag orange dots to create connections.</p>
- <p>click on or near blue dots to make them move in that direction.</p>
- <p><a id="add" href="#" class="cmd">add a disc</a></p>
- <p><a id="clear" href="#" class="cmd">remove all connections</a><br/>
- </div>
- <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/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
- <script type="text/javascript" src="http://jsplumb.googlecode.com/svn/trunk/js/jquery.jsPlumb-1.1.1-RC1.js"></script>
- <script type="text/javascript" src="http://jsplumb.googlecode.com/svn/trunk/js/jquery.jsPlumb-defaults-1.1.0.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:6 };
- var endpoint = {
- anchor:jsPlumb.makeAnchor(0.5,0.5,0,-1),
- connectionStyle:{lineWidth:7,strokeStyle:'rgba(198,89,30,0.7)'},
- endpoint:new jsPlumb.Endpoints.Image({url:"../img/littledot.png"}),
- connector:new jsPlumb.Connectors.Bezier(90),
- endpointsOnTop:true,
- isSource:true,
- maxConnections:10,
- isTarget:true,
- dropOptions:{tolerance:'touch', scope:'conn', hoverClass:'dropHover'},
- dragOptions:{scope:'conn'}
- };
- var prepare = function(elId) {
- $("#" + elId).hover(
- function() { $(this).addClass("bigdot-hover"); },
- function() { $(this).removeClass("bigdot-hover"); }
- );
- $("#" + elId).click(function(e, ui) {
- if ($(this).hasClass("jsPlumb_dragged")) {
- $(this).removeClass("jsPlumb_dragged");
- return;
- }
- var o = $(this).offset();
- var w = $(this).outerWidth();
- var h = $(this).outerHeight();
- var c = [o.left + (w/2) - e.pageX, o.top + (h/2) - e.pageY];
- var oo = [c[0] / w, c[1] / h];
- var l = oo[0] < 0 ? '+=' : '-=', t = oo[1] < 0 ? "+=" : '-=';
- var DIST = 450;
- l = l + Math.abs(oo[0] * DIST);
- t = t + Math.abs(oo[1] * DIST);
- jsPlumb.animate($(this).attr("id"), {left:l, top:t}, {duration:900});
- });
- return $("#" + elId).addEndpoint(endpoint)[0];
- };
- var e1 = prepare("bd1");
- var e2 = prepare("bd2");
- var e3 = prepare("bd3");
- var e4 = prepare("bd4");
- $("#clear").click(function() { jsPlumb.detachEverything(); });
- $("#bd1").plumb({target:'bd2', sourceEndpoint:e1, targetEndpoint:e2});
- $("#bd1").plumb({target:'bd3', sourceEndpoint:e1, targetEndpoint:e3});
- $("#bd1").plumb({target:'bd4', sourceEndpoint:e1, targetEndpoint:e4});
- $("#add").click(function() {
- var d = document.createElement("div");
- d.className = "bigdot";
- d.style.display='none';
- document.body.appendChild(d);
- var id = '' + ((new Date().getTime()));
- $(d).attr("id", id);
- var w = screen.width - 162, h = screen.height - 162;
- var x = (0.2 * w) + Math.floor(Math.random()*(0.5 * w));
- var y = (0.2 * h) + Math.floor(Math.random()*(0.6 * h));
- d.style.top= y + 'px';
- d.style.left= x + 'px';
- var e = prepare(id);
- e.canvas.style.display = 'none';
- $(d).fadeIn(function() {
- jsPlumb.animate(id, {left:'+=5', top:'-=5'}, {duration:900});
- $(e.canvas).fadeIn();
- });
- });
- // remove endpoints test
- $(".remove-endpoints").click(function() {
- jsPlumb.removeAllEndpoints($(this).attr("rel"));
- return false;
- });
- });
- </script>
- <!-- Start of StatCounter Code -->
- <script type="text/javascript">
- var sc_project=5700644;
- var sc_invisible=1;
- var sc_partition=71;
- var sc_click_stat=1;
- var sc_security="1cb90164";
- </script>
- <script type="text/javascript"
- src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
- class="statcounter"><a title="counter for wordpress"
- href="http://www.statcounter.com/wordpress.org/"
- target="_blank"><img class="statcounter"
- src="http://c.statcounter.com/5700644/0/1cb90164/1/"
- alt="counter for wordpress" ></a></div></noscript>
- <!-- End of StatCounter Code -->
- </body>
- </html>
|