Left element 1
Left element 2
Left element 3
Left element 4
Left element 5
Right element 1
Right element 2
Right element 3
Right element 4
Right element 5
The code gist is as follows:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Simple mapping tool</title> | |
| <script src="assets/lib/jQuery/jquery-3.1.0.js"></script> | |
| <script src="assets/lib/jquery-ui-1.12.0.custom/jquery-ui.js"></script> | |
| <script src="assets/lib/jsPlumb/jsPlumb-2.1.5.js"></script> | |
| <style> | |
| h1 { | |
| text-align: center; | |
| } | |
| .canvas { | |
| width: 60%; | |
| height: auto; | |
| margin: 100px auto; | |
| padding 10px; | |
| } | |
| .pane { | |
| border: 1px solid #c8c8c8; | |
| } | |
| .left-pane { | |
| float: left; | |
| } | |
| .right-pane { | |
| float: right; | |
| } | |
| .element { | |
| padding: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Simple element-mapping example</h1> | |
| <div class="canvas"> | |
| <div class="pane left-pane"> | |
| <div class="element left-element">Left element 1</div> | |
| <div class="element left-element">Left element 2</div> | |
| <div class="element left-element">Left element 3</div> | |
| <div class="element left-element">Left element 4</div> | |
| <div class="element left-element">Left element 5</div> | |
| </div> | |
| <div class="pane right-pane"> | |
| <div class="element right-element">Right element 1</div> | |
| <div class="element right-element">Right element 2</div> | |
| <div class="element right-element">Right element 3</div> | |
| <div class="element right-element">Right element 4</div> | |
| <div class="element right-element">Right element 5</div> | |
| </div> | |
| </div> | |
| <script> | |
| jsPlumb.ready(function () { | |
| jsPlumb.setContainer("canvas"); | |
| drawEndPoints("left-element", "Right"); | |
| drawEndPoints("right-element", "Left"); | |
| }); | |
| function drawEndPoints(classname, endpointposition) { | |
| var endpointOptions = { | |
| isSource: true, | |
| isTarget: true, | |
| // set a custom icon at the endpoint | |
| endpoint: ["Image", { | |
| src: "assets/application/images/arrow-head.png", | |
| cssClass: "leaf-endpoint" | |
| }], | |
| maxConnections: -1, | |
| connector: "Straight", | |
| connectorStyle: { | |
| lineWidth: 2, | |
| strokeStyle: 'black' | |
| }, | |
| scope: "blackline", | |
| dropOptions: { | |
| drop: function (e, ui) { | |
| alert('drop!'); | |
| } | |
| } | |
| }; | |
| jsPlumb.addEndpoint($("." + classname), { | |
| anchor: endpointposition | |
| }, endpointOptions); | |
| } | |
| </script> | |
| </body> | |
| </html> |
0 comments:
Post a Comment