dragChildElementsYUI.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 - YUI3</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="dragChildElements.html">jQuery</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="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
  69. <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
  70. <!-- main jsplumb engine -->
  71. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-1.3.6-RC1.js"></script>
  72. <!-- connectors, endpoint and overlays -->
  73. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-defaults-1.3.6-RC1.js"></script>
  74. <!-- state machine connectors -->
  75. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-connectors-statemachine-1.3.6-RC1.js"></script>
  76. <!-- SVG renderer -->
  77. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-svg-1.3.6-RC1.js"></script>
  78. <!-- canvas renderer -->
  79. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-canvas-1.3.6-RC1.js"></script>
  80. <!-- vml renderer -->
  81. <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-vml-1.3.6-RC1.js"></script>
  82. <!-- jquery jsPlumb adapter -->
  83. <script type="text/javascript" src="../../js/1.3.6/yui.jsPlumb-1.3.6-RC1.js"></script>
  84. <script>
  85. jsPlumb.ready(function() {
  86. jsPlumb.importDefaults({
  87. Container:document.body
  88. });
  89. // make the parent draggable. jsplumb needs to remember this, and then when endpoints are added below
  90. // it needs to register them against that draggable, by looking up the parent hierarchy for elements for
  91. // which it has a draggable registered.
  92. jsPlumb.draggable(Y.all(".p-existing"));
  93. // delete on click
  94. jsPlumb.bind("click", jsPlumb.detach);
  95. var e = {
  96. endpoint:["Dot", {radius:7}]
  97. };
  98. jsPlumb.addEndpoint(Y.all(".cs"), e, { isSource:true, anchor:"RightMiddle", paintStyle:{fillStyle:"green"}});
  99. jsPlumb.addEndpoint(Y.all(".ct"), e, { isTarget:true, anchor:"LeftMiddle", paintStyle:{fillStyle:"blue"}});
  100. // now make p3 draggable. it should discover child endpoints and register them.
  101. jsPlumb.draggable(Y.one("#p3"));
  102. });
  103. </script>
  104. </body>
  105. </html>