dragAnimDemo.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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.Defaults.DragOptions = { cursor: 'wait', zIndex:20 };
  23. jsPlumb.Defaults.Endpoint = [ "Image", { url:"../../img/littledot.png" } ];
  24. jsPlumb.Defaults.Connector = [ "Bezier", { curviness: 90 } ];
  25. var e1 = prepare("bd1");
  26. var e2 = prepare("bd2");
  27. var e3 = prepare("bd3");
  28. var e4 = prepare("bd4");
  29. jsPlumbDemo.initClearButton();
  30. jsPlumb.connect({ source:e1, target:e2 });
  31. jsPlumb.connect({ source:e1, target:e3 });
  32. jsPlumb.connect({ source:e1, target:e4 });
  33. jsPlumbDemo.initAddButton();
  34. },
  35. // this is overridden by the YUI demo.
  36. createDisc : function() {
  37. var d = document.createElement("div");
  38. d.className = "bigdot";
  39. document.body.appendChild(d);
  40. var id = '' + ((new Date().getTime())), _d = jsPlumb.CurrentLibrary.getElementObject(d);
  41. jsPlumb.CurrentLibrary.setAttribute(_d, "id", id);
  42. var w = screen.width - 162, h = screen.height - 162;
  43. var x = (0.2 * w) + Math.floor(Math.random()*(0.5 * w));
  44. var y = (0.2 * h) + Math.floor(Math.random()*(0.6 * h));
  45. d.style.top= y + 'px';
  46. d.style.left= x + 'px';
  47. return {d:d, id:id};
  48. },
  49. addDisc : function() {
  50. var info = jsPlumbDemo.createDisc();
  51. var e = prepare(info.id);
  52. jsPlumb.draggable(info.id);
  53. discs.push(info.id);
  54. },
  55. reset : function() {
  56. for (var i = 0; i < discs.length; i++) {
  57. var d = document.getElementById(discs[i]);
  58. if (d) d.parentNode.removeChild(d);
  59. }
  60. discs = [];
  61. }
  62. };
  63. })();