makeTargetDemo.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. ;(function() {
  2. window.jsPlumbDemo = {
  3. init : function() {
  4. jsPlumb.Defaults.Container = $("body");
  5. jsPlumb.bind("click", function(conn) {
  6. jsPlumb.detach(conn);
  7. jsPlumb.removeEndpoint(conn.target, conn.endpoints[1]);
  8. });
  9. //jsPlumb.setRenderMode(jsPlumb.SVG);
  10. var dropOptions = { hoverClass:"hover", activeClass:"active" },
  11. endpointStyle = {fillStyle:"#456"};
  12. var beforeDrop = function(connection) {
  13. var existingConnections = jsPlumb.getConnections({
  14. source:connection.sourceId,
  15. target:connection.targetId
  16. });
  17. console.log(existingConnections);
  18. return existingConnections.length == 0;
  19. };
  20. jsPlumb.makeTarget("window1", {
  21. endpoint:{
  22. anchor:["TopLeft", "TopRight", "BottomRight", "BottomLeft"],
  23. paintStyle:endpointStyle
  24. },
  25. dropOptions:dropOptions
  26. });
  27. jsPlumb.addEndpoint("window1", {
  28. isTarget:true,
  29. paintStyle:endpointStyle
  30. });
  31. jsPlumb.makeTarget("window3", {
  32. endpoint:{
  33. anchor:[ "Fixed", { orientation:[0, 1] } ],
  34. paintStyle:endpointStyle,
  35. },
  36. dropOptions:dropOptions
  37. });
  38. jsPlumb.makeTarget("window4", {
  39. endpoint:{
  40. anchor:[ "Grid", { grid:[2,3], orientation:[0, 1] } ],
  41. paintStyle:endpointStyle,
  42. },
  43. dropOptions:dropOptions
  44. });
  45. var ep = {
  46. //endpoint:["Dot", {radius:10}],
  47. paintStyle:endpointStyle,
  48. isSource:true,
  49. maxConnections:-1,
  50. connectorStyle:{lineWidth:4,strokeStyle:"#456", outlineColor:"#FFFFD1", outlineWidth:2}
  51. };
  52. jsPlumb.addEndpoint("window2", {anchor:"TopCenter"}, ep);
  53. jsPlumb.addEndpoint("window2", {anchor:"TopLeft"}, ep);
  54. jsPlumb.addEndpoint("window2", {anchor:"TopRight"}, ep);
  55. jsPlumb.bind("beforeDrop", beforeDrop);
  56. jsPlumb.draggable($(".window"));
  57. }
  58. };
  59. })();