drag.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. var Drag = {
  2. obj : null,
  3. init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
  4. {
  5. o.onmousedown = Drag.start;
  6. o.hmode = bSwapHorzRef ? false : true ;
  7. o.vmode = bSwapVertRef ? false : true ;
  8. o.root = oRoot && oRoot != null ? oRoot : o ;
  9. if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
  10. if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
  11. if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
  12. if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
  13. o.minX = typeof minX != 'undefined' ? minX : null;
  14. o.minY = typeof minY != 'undefined' ? minY : null;
  15. o.maxX = typeof maxX != 'undefined' ? maxX : null;
  16. o.maxY = typeof maxY != 'undefined' ? maxY : null;
  17. o.xMapper = fXMapper ? fXMapper : null;
  18. o.yMapper = fYMapper ? fYMapper : null;
  19. o.root.onDragStart = new Function();
  20. o.root.onDragEnd = new Function();
  21. o.root.onDrag = new Function();
  22. },
  23. start : function(e)
  24. {
  25. var o = Drag.obj = this;
  26. e = Drag.fixE(e);
  27. var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
  28. var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
  29. o.root.onDragStart(x, y);
  30. o.lastMouseX = e.clientX;
  31. o.lastMouseY = e.clientY;
  32. if (o.hmode) {
  33. if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
  34. if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
  35. } else {
  36. if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
  37. if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
  38. }
  39. if (o.vmode) {
  40. if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
  41. if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
  42. } else {
  43. if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
  44. if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
  45. }
  46. document.onmousemove = Drag.drag;
  47. document.onmouseup = Drag.end;
  48. return false;
  49. },
  50. drag : function(e)
  51. {
  52. e = Drag.fixE(e);
  53. var o = Drag.obj;
  54. var ey = e.clientY;
  55. var ex = e.clientX;
  56. var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
  57. var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
  58. var nx, ny;
  59. if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
  60. if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
  61. if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
  62. if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
  63. nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
  64. ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
  65. if (o.xMapper) nx = o.xMapper(y)
  66. else if (o.yMapper) ny = o.yMapper(x)
  67. Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
  68. Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
  69. Drag.obj.lastMouseX = ex;
  70. Drag.obj.lastMouseY = ey;
  71. Drag.obj.root.onDrag(nx, ny);
  72. return false;
  73. },
  74. end : function()
  75. {
  76. document.onmousemove = null;
  77. document.onmouseup = null;
  78. Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
  79. parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
  80. Drag.obj = null;
  81. },
  82. fixE : function(e)
  83. {
  84. if (typeof e == 'undefined') e = window.event;
  85. if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
  86. if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
  87. return e;
  88. }
  89. };
  90. var masked=false;
  91. // 全屏遮罩层
  92. function boxAlpha (){
  93. if (masked==false){
  94. maskLayer();
  95. masked=true;
  96. }
  97. else{
  98. $('#maskLayer').hide();
  99. masked=false;
  100. }
  101. }
  102. function maskLayer(){
  103. var FW=document.body.scrollWidth;
  104. var FH=document.body.scrollHeight;
  105. var SH=window.screen.height;
  106. FH=FH<SH?SH:FH;
  107. $("#alphadiv").height(FH).width(FW);
  108. $('#maskLayer').show();
  109. $('#maskLayer_iframe').css({position:"absolute",left:"0px",top:"0px"}).height(FH).width(FW);
  110. }
  111. function draglayer(){
  112. var och=$("#drag").height();
  113. var ocw=$("#drag").width();
  114. var bsl = document.documentElement.scrollLeft || document.documentElement.scrollLeft;
  115. var bst = document.documentElement.scrollTop || document.documentElement.scrollTop;
  116. var bcw = document.documentElement.clientWidth || document.documentElement.clientWidth;
  117. var bch = document.documentElement.clientHeight || document.documentElement.clientHeight;
  118. /*
  119. !DOCTYPE声明bug调试
  120. var bsl = document.body.scrollLeft || document.documentElement.scrollLeft;
  121. var bst = document.body.scrollTop || document.documentElement.scrollTop;
  122. var bcw = document.body.clientWidth || document.documentElement.clientWidth;
  123. var bch = document.body.clientHeight || document.documentElement.clientHeight;
  124. */
  125. var osl = bsl + Math.floor( ( bcw - ocw ) / 2 );
  126. osl = Math.max( bsl , osl );
  127. var ost = bst + Math.floor( ( bch - och ) / 2 );
  128. ost = Math.max( bst , ost );
  129. $("#drag").css({"top":ost,"left":osl,"width":ocw}).show();
  130. var theHandle = document.getElementById("drag_h");
  131. var theRoot = document.getElementById("drag");
  132. Drag.init(theHandle, theRoot);
  133. }
  134. $(window).resize(function (){
  135. if (masked==true){
  136. draglayer();
  137. maskLayer();
  138. }
  139. });