dragAnimDemo.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. ;(function() {
  2. // notice there are no dragOptions specified here, which is different from the
  3. // draggableConnectors2 demo. all connections on this page are therefore
  4. // implicitly in the default scope.
  5. var endpoint = {
  6. anchor:[0.5,0.5,0,-1],
  7. connectorStyle:{ lineWidth:7,strokeStyle:"rgba(198,89,30,0.7)" },
  8. endpointsOnTop:true,
  9. isSource:true,
  10. maxConnections:10,
  11. isTarget:true,
  12. dropOptions:{ tolerance:"touch",hoverClass:"dropHover" }
  13. },
  14. prepare = function(elId) {
  15. jsPlumbDemo.initHover(elId);
  16. jsPlumbDemo.initAnimation(elId);
  17. return jsPlumb.addEndpoint(elId, endpoint);
  18. },
  19. discs = [];
  20. window.jsPlumbDemo = {
  21. init : function() {
  22. jsPlumb.importDefaults({
  23. DragOptions : { cursor: 'wait', zIndex:20 },
  24. Endpoint : [ "Image", { url:"../img/littledot.png" } ],
  25. Connector : [ "Bezier", { curviness: 90 } ]
  26. });
  27. var e1 = prepare("bd1"),
  28. e2 = prepare("bd2"),
  29. e3 = prepare("bd3"),
  30. e4 = prepare("bd4");
  31. jsPlumbDemo.initClearButton();
  32. jsPlumb.connect({ source:e1, target:e2 });
  33. jsPlumb.connect({ source:e1, target:e3 });
  34. jsPlumb.connect({ source:e1, target:e4 });
  35. jsPlumbDemo.initAddButton();
  36. },
  37. // this is overridden by the YUI demo.
  38. createDisc : function() {
  39. var d = document.createElement("div");
  40. d.className = "bigdot";
  41. document.getElementById("demo").appendChild(d);
  42. var id = '' + ((new Date().getTime())), _d = jsPlumb.CurrentLibrary.getElementObject(d);
  43. jsPlumb.CurrentLibrary.setAttribute(_d, "id", id);
  44. var w = screen.width - 162, h = screen.height - 162;
  45. var x = (0.2 * w) + Math.floor(Math.random()*(0.5 * w));
  46. var y = (0.2 * h) + Math.floor(Math.random()*(0.6 * h));
  47. d.style.top= y + 'px';
  48. d.style.left= x + 'px';
  49. return {d:d, id:id};
  50. },
  51. addDisc : function() {
  52. var info = jsPlumbDemo.createDisc();
  53. var e = prepare(info.id);
  54. jsPlumb.draggable(info.id);
  55. discs.push(info.id);
  56. },
  57. reset : function() {
  58. for (var i = 0; i < discs.length; i++) {
  59. var d = document.getElementById(discs[i]);
  60. if (d) d.parentNode.removeChild(d);
  61. }
  62. discs = [];
  63. }
  64. };
  65. })();