widget.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. function _drag(options) {
  2. var moveEl = options.moveEl,
  3. moveFn = options.moveFn,
  4. clickEl = options.clickEl || moveEl,
  5. beforeDrag = options.beforeDrag,
  6. iframeFix = options.iframeFix === undefined ? true : options.iframeFix;
  7. var docs = [document];
  8. if (iframeFix) {
  9. K('iframe').each(function() {
  10. // 判断是否跨域
  11. var src = _formatUrl(this.src || '', 'absolute');
  12. if (/^https?:\/\//.test(src)) {
  13. return;
  14. }
  15. var doc;
  16. try {
  17. doc = _iframeDoc(this);
  18. } catch(e) {}
  19. if (doc) {
  20. var pos = K(this).pos();
  21. K(doc).data('pos-x', pos.x);
  22. K(doc).data('pos-y', pos.y);
  23. docs.push(doc);
  24. }
  25. });
  26. }
  27. clickEl.mousedown(function(e) {
  28. // 不响应右键,否则可能导致点选右键菜单时无法取消拖拽
  29. if(e.button !== 0 && e.button !== 1) {
  30. return;
  31. }
  32. e.stopPropagation();
  33. var self = clickEl.get(),
  34. x = _removeUnit(moveEl.css('left')),
  35. y = _removeUnit(moveEl.css('top')),
  36. width = moveEl.width(),
  37. height = moveEl.height(),
  38. pageX = e.pageX,
  39. pageY = e.pageY;
  40. if (beforeDrag) {
  41. beforeDrag();
  42. }
  43. function moveListener(e) {
  44. e.preventDefault();
  45. var kdoc = K(_getDoc(e.target));
  46. var diffX = _round((kdoc.data('pos-x') || 0) + e.pageX - pageX);
  47. var diffY = _round((kdoc.data('pos-y') || 0) + e.pageY - pageY);
  48. moveFn.call(clickEl, x, y, width, height, diffX, diffY);
  49. }
  50. function selectListener(e) {
  51. e.preventDefault();
  52. }
  53. function upListener(e) {
  54. e.preventDefault();
  55. K(docs).unbind('mousemove', moveListener)
  56. .unbind('mouseup', upListener)
  57. .unbind('selectstart', selectListener);
  58. if (self.releaseCapture) {
  59. self.releaseCapture();
  60. }
  61. }
  62. // bind event
  63. K(docs).mousemove(moveListener)
  64. .mouseup(upListener)
  65. .bind('selectstart', selectListener);
  66. if (self.setCapture) {
  67. self.setCapture();
  68. }
  69. });
  70. }
  71. // create KWidget class
  72. function KWidget(options) {
  73. this.init(options);
  74. }
  75. _extend(KWidget, {
  76. init : function(options) {
  77. var self = this;
  78. // public properties
  79. self.name = options.name || '';
  80. self.doc = options.doc || document;
  81. self.win = _getWin(self.doc);
  82. self.x = _addUnit(options.x);
  83. self.y = _addUnit(options.y);
  84. self.z = options.z;
  85. self.width = _addUnit(options.width);
  86. self.height = _addUnit(options.height);
  87. self.div = K('<div style="display:block;"></div>');
  88. self.options = options;
  89. // pravate properties
  90. self._alignEl = options.alignEl;
  91. if (self.width) {
  92. self.div.css('width', self.width);
  93. }
  94. if (self.height) {
  95. self.div.css('height', self.height);
  96. }
  97. if (self.z) {
  98. self.div.css({
  99. position : 'absolute',
  100. left : self.x,
  101. top : self.y,
  102. 'z-index' : self.z
  103. });
  104. }
  105. if (self.z && (self.x === undefined || self.y === undefined)) {
  106. self.autoPos(self.width, self.height);
  107. }
  108. if (options.cls) {
  109. self.div.addClass(options.cls);
  110. }
  111. if (options.shadowMode) {
  112. self.div.addClass('ke-shadow');
  113. }
  114. if (options.css) {
  115. self.div.css(options.css);
  116. }
  117. if (options.src) {
  118. K(options.src).replaceWith(self.div);
  119. } else {
  120. K(self.doc.body).append(self.div);
  121. }
  122. if (options.html) {
  123. self.div.html(options.html);
  124. }
  125. if (options.autoScroll) {
  126. if (_IE && _V < 7 || _QUIRKS) {
  127. var scrollPos = _getScrollPos();
  128. K(self.win).bind('scroll', function(e) {
  129. var pos = _getScrollPos(),
  130. diffX = pos.x - scrollPos.x,
  131. diffY = pos.y - scrollPos.y;
  132. self.pos(_removeUnit(self.x) + diffX, _removeUnit(self.y) + diffY, false);
  133. });
  134. } else {
  135. self.div.css('position', 'fixed');
  136. }
  137. }
  138. },
  139. pos : function(x, y, updateProp) {
  140. var self = this;
  141. updateProp = _undef(updateProp, true);
  142. if (x !== null) {
  143. x = x < 0 ? 0 : _addUnit(x);
  144. self.div.css('left', x);
  145. if (updateProp) {
  146. self.x = x;
  147. }
  148. }
  149. if (y !== null) {
  150. y = y < 0 ? 0 : _addUnit(y);
  151. self.div.css('top', y);
  152. if (updateProp) {
  153. self.y = y;
  154. }
  155. }
  156. return self;
  157. },
  158. autoPos : function(width, height) {
  159. var x, y, self = this,
  160. w = _removeUnit(width) || 0,
  161. h = _removeUnit(height) || 0,
  162. scrollPos = _getScrollPos();
  163. if (self._alignEl) {
  164. var knode = K(self._alignEl),
  165. pos = knode.pos(),
  166. diffX = _round(knode[0].clientWidth / 2 - w / 2),
  167. diffY = _round(knode[0].clientHeight / 2 - h / 2);
  168. x = diffX < 0 ? pos.x : pos.x + diffX;
  169. y = diffY < 0 ? pos.y : pos.y + diffY;
  170. } else {
  171. var docEl = _docElement(self.doc);
  172. x = _round(scrollPos.x + (docEl.clientWidth - w) / 2);
  173. y = _round(scrollPos.y + (docEl.clientHeight - h) / 2);
  174. }
  175. // 用position:fixed后不需要添加scroll坐标
  176. if (!(_IE && _V < 7 || _QUIRKS)) {
  177. x -= scrollPos.x;
  178. y -= scrollPos.y;
  179. }
  180. return self.pos(x, y);
  181. },
  182. remove : function() {
  183. var self = this;
  184. if (_IE && _V < 7 || _QUIRKS) {
  185. K(self.win).unbind('scroll');
  186. }
  187. self.div.remove();
  188. _each(self, function(i) {
  189. self[i] = null;
  190. });
  191. return this;
  192. },
  193. show : function() {
  194. this.div.show();
  195. return this;
  196. },
  197. hide : function() {
  198. this.div.hide();
  199. return this;
  200. },
  201. draggable : function(options) {
  202. var self = this;
  203. options = options || {};
  204. options.moveEl = self.div;
  205. options.moveFn = function(x, y, width, height, diffX, diffY) {
  206. if ((x = x + diffX) < 0) {
  207. x = 0;
  208. }
  209. if ((y = y + diffY) < 0) {
  210. y = 0;
  211. }
  212. self.pos(x, y);
  213. };
  214. _drag(options);
  215. return self;
  216. }
  217. });
  218. function _widget(options) {
  219. return new KWidget(options);
  220. }
  221. K.WidgetClass = KWidget;
  222. K.widget = _widget;