123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <html>
- <head>
- <title></title>
- <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.1/jquery-ui.min.js"></script>
- <script type="text/javascript" src="../js/1.2.2/jsPlumb-1.2.2-RC1.js"></script>
- <script type="text/javascript" src="../js/1.2.2/jsPlumb-defaults-1.2.2-RC1.js"></script>
- <script type="text/javascript" src="../js/1.2.2/jquery.jsPlumb-1.2.2-RC1.js"></script>
- <style>
- li {
- margin-bottom: 20px;
- }
- #option1 {
- float: left;
- }
- #option2 {
- border-color: blue;
- float: left;
- }
- #option3 {
- border-color: green;
- float: left;
- }
- #option4 {
- border-color: purple;
- float: left;
- }
- #option5 {
- border-color: black;
- float: left;
- }
- #propositions {
- float: left;
- width: 80px;
- }
- #choices {
- margin-left: 500px;
- width: 80px;
- }
- ._jsPlumb_endpoint {
- z-index:50;
- }
- ._jsPlumb_connector {
- z-index:1;
- }
- .dropHover {
- border:1px dotted red;
- }
- .dragActive {
- border:2px dotted orange;
- }
- .cmdLink {
- font-size:0.8em;
- }
- #clear {
- padding:0.3em;
- }
- #clear:hover {
- background-color:yellow;
- }
-
- </style>
- </head>
- <body>
- <ul id="propositions">
- <li id="option1" class="prop">Option 1</li>
- <li id="option2" class="prop">Option 2</li>
- <li id="option3" class="prop">Option 3</li>
- <li id="option4" class="prop">Option 4</li>
- </ul>
- <ul id="choices">
- <li id="choice1">Choice 1</li>
- <li id="choice2">Choice 2</li>
- <li id="choice3">Choice 3</li>
- <li id="choice4">Choice 4</li>
- </ul>
- <script type="text/javascript">
- $(document).ready(function() {
-
- jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
- jsPlumb.Defaults.PaintStyle = { strokeStyle:'#666' };
- jsPlumb.Defaults.EndpointStyle = { width:5, height:5, strokeStyle:'#666' };
- jsPlumb.Defaults.Endpoint = new jsPlumb.Endpoints.Rectangle();
- jsPlumb.Defaults.Anchors = [jsPlumb.Anchors.TopCenter, jsPlumb.Anchors.TopCenter];
-
-
- var exampleDropOptions = {
- tolerance:'touch',
- hoverClass:'dropHover',
- activeClass:'dragActive'
- };
-
- var answerEndpoint = {
- endpoint:new jsPlumb.Endpoints.Rectangle(),
- style:{ width:10, height:10, fillStyle:'#00f' },
- maxConnections:1,
- isSource:false,
- dragOptions : { scope:'answerConnection' },
- connectionStyle : {
- gradient:{stops:[[0,'#00f'], [0.5, '#09098e'], [1,'#00f']]},
- lineWidth:5,
- strokeStyle:"#00f"
- },
- isTarget:true,
- dropOptions : $.extend({scope:'questionConnection'}, exampleDropOptions)
- };
-
- var questionEndpoint = {
- endpoint:new jsPlumb.Endpoints.Dot({radius:5}),
- style:{ strokeStyle:'#316b31' },
- isSource:true,
- reattach:true,
- dragOptions : { scope:'questionConnection' },
- connectionStyle:{ strokeStyle:'#316b31', lineWidth:8 },
- connector: new jsPlumb.Connectors.Bezier(63),
- maxConnections:1,
- isTarget:false,
- dropOptions : $.extend({scope:'answerConnection'}, exampleDropOptions)
- };
-
-
- // setup some empty endpoints. again note the use of '$.extend' to reuse all the parameters except the location
- // of the anchor (purely because we want to move the anchor around here; you could set it one time and forget about it though.)
-
- $("#option1").addEndpoints([
- $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
- ]);
- $("#option2").addEndpoints([
- $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
- ]);
- $("#option3").addEndpoints([
- $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
- ]);
- $("#option4").addEndpoints([
- $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
- ]);
-
- $("#choice1").addEndpoints([
- $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
- ]);
- $("#choice2").addEndpoints([
- $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
- ]);
- $("#choice3").addEndpoints([
- $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
- ]);
- $("#choice4").addEndpoints([
- $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
- ]);
-
- // add the third example using the '.option' class.
- // $(".option").addEndpoint(answerEndpoint3);
-
- $(".hide").click(function() {
- jsPlumb.toggle($(this).attr("rel"));
- });
-
- $(".drag").click(function() {
- var s = jsPlumb.toggleDraggable($(this).attr("rel"));
- $(this).html(s ? 'disable dragging' : 'enable dragging');
- if (!s) $("#" + $(this).attr("rel")).addClass('drag-locked'); else $("#" + $(this).attr("rel")).removeClass('drag-locked');
- $("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
- });
-
- $(".detach").click(function() {
- jsPlumb.detachAll($(this).attr("rel"));
- });
-
- $("#clear").click(function() { jsPlumb.detachEverything(); });
- });
- </script>
- </body>
- </html>
|