dragChildElements.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!doctype html>
  2. <!--
  3. test page for the functionality to set some parent as draggable and when you drag that parent it knows to
  4. update any child elements that have endpoints.
  5. -->
  6. <html>
  7. <head>
  8. <title>drag child elements test page</title>
  9. <style>
  10. #demo {
  11. overflow:scroll;
  12. margin-top:5em;
  13. }
  14. ._jsPlumb_connector {
  15. z-index:4;
  16. }
  17. ._jsPlumb_endpoint {
  18. z-index:6;
  19. }
  20. .dragHover { border:1px dotted red; }
  21. .p {
  22. position:absolute;
  23. width:10em;
  24. height:10em;
  25. text-align:center;
  26. border:1px solid black;
  27. z-index:5;
  28. background-color:white;
  29. opacity:0.9;
  30. }
  31. .c {
  32. width:4em;
  33. height:2em;
  34. margin:1em;
  35. background-color:red;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <p>
  41. This is a test for endpoints that are the children of some element that is draggable. this feature will be new
  42. to jsPlumb 1.3.6.
  43. </p>
  44. <p>
  45. <a href="dragChildElementsYUI.html">YUI3</a>
  46. <a href="dragChildElementsMootools.html">MooTools</a>
  47. </p>
  48. <div id="demo">
  49. <div id="p1" class="p p-existing">
  50. <div class="c cs">drag</div>
  51. <div class="c cs">drag</div>
  52. <div class="c cs">drag</div>
  53. </div>
  54. <div id="p2" class="p p-existing" style="top:300px;left:400px;">
  55. <div class="c ct">drop</div>
  56. <div class="c ct">drop</div>
  57. <div class="c ct">drop</div>
  58. </div>
  59. <!-- note this div lacks the "p-existing" class, which means it will not be initialised
  60. draggable along with the other two. this is to test the case where a div is made draggable and
  61. contains divs with endpoints registered -->
  62. <div id="p3" class="p" style="top:170px;left:690px;">
  63. <div class="c ct">drop</div>
  64. <div class="c ct">drop</div>
  65. <div class="c ct">drop</div>
  66. </div>
  67. </div>
  68. <script type="text/javascript" src="../../js/lib/jquery-1.6.3-min.js"></script>
  69. <script type="text/javascript" src="../../js/lib/jquery-ui-1.8.13-min.js"></script>
  70. <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
  71. <!-- main jsplumb engine -->
  72. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-1.3.6-RC1.js"></script>
  73. <!-- connectors, endpoint and overlays -->
  74. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-defaults-1.3.6-RC1.js"></script>
  75. <!-- state machine connectors -->
  76. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-connectors-statemachine-1.3.6-RC1.js"></script>
  77. <!-- SVG renderer -->
  78. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-svg-1.3.6-RC1.js"></script>
  79. <!-- canvas renderer -->
  80. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-canvas-1.3.6-RC1.js"></script>
  81. <!-- vml renderer -->
  82. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-vml-1.3.6-RC1.js"></script>
  83. <!-- jquery jsPlumb adapter -->
  84. <script type="text/javascript" src="../../js/1.3.6/jquery.jsPlumb-1.3.6-RC1.js"></script>
  85. <script>
  86. jsPlumb.ready(function() {
  87. jsPlumb.importDefaults({
  88. Container:$("body")
  89. });
  90. // make the parent draggable. jsplumb needs to remember this, and then when endpoints are added below
  91. // it needs to register them against that draggable, by looking up the parent hierarchy for elements for
  92. // which it has a draggable registered.
  93. jsPlumb.draggable($(".p-existing"));
  94. // delete on click
  95. jsPlumb.bind("click", jsPlumb.detach);
  96. var e = {
  97. endpoint:["Dot", {radius:7}]
  98. };
  99. jsPlumb.addEndpoint($(".cs"), e, { isSource:true, anchor:"RightMiddle", paintStyle:{fillStyle:"green"}});
  100. jsPlumb.addEndpoint($(".ct"), e, { isTarget:true, anchor:"LeftMiddle", paintStyle:{fillStyle:"blue"}});
  101. // now make p3 draggable. it should discover child endpoints and register them.
  102. jsPlumb.draggable($("#p3"));
  103. });
  104. </script>
  105. </body>
  106. </html>