123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <!doctype html>
- <!--
- test page for the functionality to set some parent as draggable and when you drag that parent it knows to
- update any child elements that have endpoints.
- -->
- <html>
- <head>
- <title>drag child elements test page</title>
- <style>
- #demo {
- overflow:scroll;
- margin-top:5em;
- }
- ._jsPlumb_connector {
- z-index:4;
- }
-
- ._jsPlumb_endpoint {
- z-index:6;
- }
- .dragHover { border:1px dotted red; }
- .p {
- position:absolute;
- width:10em;
- height:10em;
- text-align:center;
- border:1px solid black;
- z-index:5;
- background-color:white;
- opacity:0.9;
- }
- .c {
- width:4em;
- height:2em;
- margin:1em;
- background-color:red;
- }
-
- </style>
- </head>
- <body>
- <p>
- This is a test for endpoints that are the children of some element that is draggable. this feature will be new
- to jsPlumb 1.3.6.
- </p>
- <p>
- <a href="dragChildElements.html">jQuery</a>
- <a href="dragChildElementsYUI.html">YUI3</a>
- </p>
- <div id="demo">
- <div id="p1" class="p p-existing">
- <div class="c cs">drag</div>
- <div class="c cs">drag</div>
- <div class="c cs">drag</div>
- </div>
-
- <div id="p2" class="p p-existing" style="top:300px;left:400px;">
- <div class="c ct">drop</div>
- <div class="c ct">drop</div>
- <div class="c ct">drop</div>
- </div>
- <!-- note this div lacks the "p-existing" class, which means it will not be initialised
- draggable along with the other two. this is to test the case where a div is made draggable and
- contains divs with endpoints registered -->
- <div id="p3" class="p" style="top:170px;left:690px;">
- <div class="c ct">drop</div>
- <div class="c ct">drop</div>
- <div class="c ct">drop</div>
- </div>
- </div>
-
- <script type="text/javascript" src="../../js/lib/mootools-1.3.2-yui-compressed.js"></script>
- <script type="text/javascript" src="../../js/lib/mootools-1.3.2.1-more.js"></script>
- <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
- <!-- main jsplumb engine -->
- <script type="text/javascript" src="../../js/1.3.6/jsPlumb-1.3.6-RC1.js"></script>
- <!-- connectors, endpoint and overlays -->
- <script type="text/javascript" src="../../js/1.3.6/jsPlumb-defaults-1.3.6-RC1.js"></script>
- <!-- state machine connectors -->
- <script type="text/javascript" src="../../js/1.3.6/jsPlumb-connectors-statemachine-1.3.6-RC1.js"></script>
- <!-- SVG renderer -->
- <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-svg-1.3.6-RC1.js"></script>
- <!-- canvas renderer -->
- <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-canvas-1.3.6-RC1.js"></script>
- <!-- vml renderer -->
- <script type="text/javascript" src="../../js/1.3.6/jsPlumb-renderers-vml-1.3.6-RC1.js"></script>
- <!-- jquery jsPlumb adapter -->
- <script type="text/javascript" src="../../js/1.3.6/mootools.jsPlumb-1.3.6-RC1.js"></script>
-
- <script>
- jsPlumb.ready(function() {
- jsPlumb.importDefaults({
- Container:document.body
- });
- // make the parent draggable. jsplumb needs to remember this, and then when endpoints are added below
- // it needs to register them against that draggable, by looking up the parent hierarchy for elements for
- // which it has a draggable registered.
- jsPlumb.draggable($$(".p-existing"));
- // delete on click
- jsPlumb.bind("click", jsPlumb.detach);
- var e = {
- endpoint:["Dot", {radius:7}]
- };
- jsPlumb.addEndpoint($$(".cs"), e, { isSource:true, anchor:"RightMiddle", paintStyle:{fillStyle:"green"}});
- jsPlumb.addEndpoint($$(".ct"), e, { isTarget:true, anchor:"LeftMiddle", paintStyle:{fillStyle:"blue"}});
-
- // now make p3 draggable. it should discover child endpoints and register them.
- jsPlumb.draggable($("p3"));
-
- });
- </script>
- </body>
- </html>
|