issue4_test.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg-flat.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
  4. <head>
  5. <!--
  6. test page for issue 4, submitted by aazaharov81.
  7. -->
  8. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
  9. <title>jsPlumb testing</title>
  10. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  12. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  13. <script type="text/javascript" src="../js/jquery.jsPlumb-1.0.3.js"></script>
  14. <style>
  15. p {text-align: center; margin: 10em}
  16. span { padding: 5em; border: 1px solid red}
  17. #third { position:absolute; left:54%; }
  18. #second { position:absolute; left:20%; }
  19. .box { z-index:5;}
  20. </style>
  21. </head>
  22. <body onunload="jsPlumb.unload();">
  23. <div>
  24. <p><span id = "first" class="box">A</span></p>
  25. <div><span id = "second" class="box">B</span></div>
  26. <div><span id = "third" class="box">C</span></div>
  27. </div>
  28. </body>
  29. <script>
  30. $( document ).ready( function() {
  31. $( "#second" ).plumb( {
  32. target: "first",
  33. draggable: true,
  34. anchors:[ jsPlumb.Anchors.RightMiddle, jsPlumb.Anchors.BottomCenter, ]
  35. } );
  36. $( "#third" ).plumb( {
  37. target: "first",
  38. draggable: true,
  39. anchors:[ jsPlumb.Anchors.LeftMiddle, jsPlumb.Anchors.BottomCenter, ]
  40. } );
  41. $( "#third" ).plumb( {
  42. target: "first",
  43. draggable: true,
  44. anchors:[ jsPlumb.Anchors.TopCenter, jsPlumb.Anchors.BottomCenter, ]
  45. } );
  46. } )
  47. </script>
  48. </html>