WindowFunction.js 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666
  1. Namespace.register("U.UF.F");
  2. //#region 窗体放大缩小
  3. //窗体的全局变量
  4. U.UF.F.isTop = false; //置顶的全局判断
  5. U.UF.F.hisTory = true; //判断是否保留最大化之前的窗体宽、高、top、left值
  6. /*
  7. * 遮罩框
  8. * 由于在拖动拉伸等过程中可能会触发到其他iframe,这里就是全局遮罩,让拖动和拉伸的过程中,不回出发到下面的iframe
  9. */
  10. U.UF.F.maskFrame = function () {
  11. return $$("div", { "style": { "cssText": "width:100%;height:100%;position:absolute;top:0;left:0;" } }, document.body);
  12. }
  13. /*
  14. ** 作用:窗体的最大化和最小化功能
  15. ** @param {element} el 整个窗体的元素
  16. */
  17. U.UF.F.windowZooming = function (el) {
  18. var _csstext = el.initcsstext, //初始化的csstext
  19. _ismax = el.ismaximize; //判断窗体是否已经最大化了
  20. //如果最大化了,那么就把他缩小
  21. if (_ismax) {
  22. el.style.cssText = _csstext;
  23. el.ismaximize = false;
  24. }
  25. //最大化处理
  26. else {
  27. //判断是否一开始就是最大化
  28. _ismax = document.body.offsetHeight == el.offsetHeight && document.body.offsetWidth == el.offsetWidth;
  29. if (_ismax) {
  30. el.style.cssText += "width:70%;height:90%;";
  31. U.UF.F.windowTopCenter(el);
  32. }
  33. else {
  34. el.initcsstext = el.style.cssText; //获取原本的csstext值
  35. el.ismaximize = true;
  36. //设置窗体最大化
  37. U.selectEl(el).css({
  38. "width": "100%",
  39. "height": "100%",
  40. "top": "0px",
  41. "left": "0px"
  42. });
  43. }
  44. }
  45. //U.MD.F.W.reSize();
  46. }
  47. /*
  48. ** 作用:窗体的最小化功能
  49. ** @param {element} el 整个窗体的元素
  50. */
  51. U.UF.F.windowMinimize = function (el) {
  52. //添加样式,实现动画效果,并且逐渐隐藏整个窗体
  53. el.style.cssText += "display:none";
  54. //-ms-transform:scale(0.5);-webkit-transform:translateX(100%); -o-transform:scale(0.5); transform:scale(0.5);
  55. }
  56. /*
  57. ** 作用:窗体的关闭功能
  58. ** @param {element} el 整个窗体的元素
  59. ** @param {string} str 操作指令
  60. */
  61. U.UF.F.closeWindow = function (el, str) {
  62. var _el = U.selectEl(el); //获取整个窗体的元素
  63. if (_el[0].style.display != "none" && str == "remove") {//判断窗体是否被隐藏,并且操作指令为remove
  64. _el.remove(); //移除整个窗体
  65. _el = null; //移除整个窗体
  66. }
  67. else {
  68. _el.css("display", "none");
  69. }
  70. }
  71. /*
  72. ** 作用:窗体的居中功能
  73. ** @param {element} el 整个窗体的元素
  74. */
  75. U.UF.F.windowTopCenter = function (el) {
  76. //异步弹出窗体置顶,因为在我们的窗体点击的时候回切换置顶,但在在里面点击应用的时候,会导致先置顶应用(调用了该函数).然后又制定点击对应的窗体。
  77. //setTimeout(function () {
  78. //获取实际高度或者是当前窗口对于窗口显示区左上角的Y位置或者是整个body的实际高度
  79. var _scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop,
  80. //获取整个页面的宽度
  81. _iwidth = document.documentElement.clientWidth,
  82. //获取整个浏览器的宽度
  83. _iheight = document.documentElement.clientHeight; //_scrollTop * 2
  84. el.style.display = "block"; //先显示窗体
  85. _zindex = (US || parent.US).ZINDEX++;
  86. U.selectEl(el).css({
  87. "zIndex": _zindex,
  88. //获取整个窗体的left的值为浏览器窗口文档显示区域的宽度不包括滚动条减去窗体的文档显示区域在除以2再加上实际宽度
  89. "left": (_iwidth - el.clientWidth) / 2 + "px",
  90. //获取整个窗体的left的值为浏览器窗口文档显示区域的高度不包括滚动条减去窗体的文档显示区域在除以2再加上实际高度
  91. "top": (_iheight - el.clientHeight) / 2 + "px"
  92. });
  93. //}, 0);
  94. }
  95. /*
  96. ** 作用:窗口的置顶功能
  97. ** @param {element} el 整个窗体的元素
  98. ** @param {string} str 是否为true
  99. 1、获取点击元素
  100. 2、给点击元素父级元素的z-index+1
  101. */
  102. U.UF.F.topWindow = function (el) {
  103. var _zindex,
  104. _el1 = U.UF.F.getWindow(el), //通过U.UF.F.getWindow()获取需要进行置顶的窗体元素
  105. _el3; //获取需要置顶元素的父级元素
  106. if (_el1 && _el1.length || el && el.length) {//判断是否有需要置顶的窗体元素
  107. for (var i = 0; i < _el1.length; i++) {//循环判断有几个窗体元素
  108. _el3 = U.selectEl(_el1[i]).Parent();
  109. //判断 是否有获取需要置顶的窗体元素的父级元素 并且 需要置顶的元素是否符合document.body或者id是否符合"usestudio_server"或者id是否符合"U_MD_Home"三种中的一种,并且是否需要置顶的元素"__top__"不为false,并且操作指令为true或者返回值在字符串中首次出现的位置是否为-1
  110. if (_el3 && (_el3 == document.body || _el3.id == "usestudio_server") && ($(_el1[i]).attr("__top__") != "false" && _el1[i]["__top__"] != "false")) {
  111. _zindex = (US || parent.US).ZINDEX++;
  112. //如果符合全部要求,则给置顶元素添加一个style样式,z-index每一次置顶都在现有的z-index中加1,并且显示出来
  113. U.selectEl(_el1[i]).addAttrArray({ "style": { "cssText": _el1[i].style.cssText + ";z-index:" + _zindex + ";display:block" } });
  114. }
  115. else {
  116. U.selectEl(_el1[i]).addAttrArray({ "style": { "cssText": _el1[i].style.cssText + ";display:block" } });
  117. }
  118. }
  119. }
  120. }
  121. /*
  122. ** 作用:获取顶层窗体的功能
  123. ** @param {element} el 整个窗体的元素
  124. */
  125. U.UF.F.getWindow = function (el) {
  126. var _arr = [], //先定义一个用于存储需要置顶元素的元素
  127. _el2 = el, //获取整个窗体的元素
  128. _el3 = document.body, //获取整个文档的body部分,不包括除body外的一切
  129. _el4 = U.selectEl("#U_MD_Home")[0] || U.selectEl("#usestudio_server")[0] || _el3; //获取满足三个条件中的一个的元素
  130. //判断是否有满足三个条件中的一个的元素
  131. if (_el4) {//如果有,则进行下面的语句
  132. //循环语句,整个窗体的元素为元素的offsetParent,并且.获取的窗体元素不为整个body的部分,也不是满足获取id为U_MD_Home和id为usestudio_server的元素,并且条件满足的情况下进行循环批判断,直到结果出现
  133. while ((_el2 = U.UF.EL.offsetParent(_el2, true)) && (_el2 && (_el2 != _el4 && _el2 != _el3))) {//因为这条语句没有循环限定次数,所以适用while循环语句
  134. if (_el2.style.position != "relative") {
  135. _arr.push(_el2); //如果条件满足,则向_arr这个存储元素的末尾添加一个窗体元素
  136. }
  137. _el2 = _el2.parentNode; //并且把窗体的父节点赋值给新的_el2元素
  138. }
  139. return _arr; //最后返回需要置顶的窗体元素的数组
  140. }
  141. }
  142. /*
  143. ** 作用:桌面窗体自动分层次处理,点击窗口自动分层,不会叠加
  144. ** @param {callback} cb 回调函数,调用分层函数
  145. ** @param {boolean} b 操作指令,知否为true或者false
  146. ** @param {element} el 获取窗体元素
  147. */
  148. U.UF.F.clickTopWindow = function (cb) {
  149. //设置点击置顶的功能
  150. U.selectEl(document.body).bind({
  151. mousedown: function () {
  152. //判断点击置顶有回调函数则回调
  153. if (U.UF.C.isFunction(cb)) {
  154. cb(event.srcElement, true);
  155. }
  156. //置顶窗体处理
  157. top.U.UF.F.topWindow(event.srcElement, true);
  158. }
  159. });
  160. }
  161. //#endregion
  162. //#region 拉伸
  163. /*
  164. * 拉伸函数处理
  165. *
  166. * 1 @param obj1 = {object} 需要拉伸的窗体
  167. * 3 @param str ={string} 判断拉伸是哪个方位
  168. 实例:U.UF.F.stretching($(".窗体")[0],拉伸类型)
  169. 拉伸类型:
  170. bottom * 向下
  171. right * 向右
  172. top * 向上
  173. left * 向左
  174. rightBottom * 右下
  175. rightTop * 右上
  176. leftTop * 左上
  177. leftBottom * 左下
  178. */
  179. U.UF.F.stretching = function (obj1, str) {
  180. var e = window.event; //获取当前鼠标点击事件
  181. //target 就是这个对象
  182. //target = e.srcElement || e.target
  183. //这个对象的值
  184. //targetValue = target.value;
  185. var _disX, _disY, _dragMinWidth = 70, _dragMinHeight = 70;
  186. //_dragMinWidth _dragMinHeight设置窗口拉伸最小宽度和高度
  187. // obj2.onmousedown = function (e) { //div的点击执行
  188. //e = e || event; //获取当前event的信息赋予e
  189. e.preventDefault(); //取消event事件的默认动作
  190. _disX = e.clientX; //当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标
  191. _disY = e.clientY; //当事件被触发时鼠标指针向对于浏览器页面(或客户区)的垂直坐标
  192. var _iparenttop = obj1.offsetTop; //当前窗口距离可视窗口顶部的距离
  193. var _iparentleft = obj1.offsetLeft; //当前窗口距离可视窗口左部的距离
  194. var _iparentwidth = obj1.offsetWidth; //当前窗口的宽度
  195. var _iparentheight = obj1.offsetHeight; //当前窗口的高度
  196. if (!$("#U_UF_F_drag_flag")[0]) {
  197. var _div = $$("div", { "style": { "cssText": "width: 100%;height: 100%;z-index: 99999;position: absolute;top:0;left:0;" }, "id": "U_UF_F_drag_flag" }, document.body);
  198. // _top = U.selectEl(U.UF.UI.form.allForm[_drag.id].header).height();
  199. // U.selectEl(_div)[0].style.top = _top + "px";
  200. }
  201. var _windowfun = {
  202. "mousemove": function (e) { //拉伸移动执行
  203. e = e || event; //获取在鼠标移动的时候event的信息
  204. var _iL = e.clientX - _disX - 3; //返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标-减去-之前窗体距离左边的距离 剩下的就是改变后的宽度
  205. //_iL 相当于 窗体要移动的距离
  206. var _iT = e.clientY - _disY; //返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的垂直坐标-减去-之前窗体距离顶部的距离 剩下的就是改变后的高度
  207. //_iT 相当于 窗体要移动的高度
  208. var _maxw = document.documentElement.clientWidth - _iparentleft - 2; //获取窗体向右扩张最大宽度(网页可视宽度减去-当前窗口距离可视窗口左部的距离)剩下最大的宽度
  209. var _maxh = document.documentElement.clientHeight - _iparenttop - 2; //获取窗体向下扩张最大高度 (网页可视高度减去-当前窗口距离可视窗口顶部的距离)剩下最大的高度
  210. if (str == "bottom") {
  211. var _ih = _iT + _iparentheight; //获取拉伸后窗体改变的高度
  212. if (_ih < _dragMinHeight) { _ih = _dragMinHeight } else if (_ih > _maxh) { _ih = _maxh; };
  213. //第一先判断改变后的高度有没有低于自己设置的最小高度如果小于就命改变后的高度变成最小高度
  214. //第二判断改变后的高度有没有大于 之前获取的最大高度 如果大于就命 改变后的高度变成最大高度
  215. obj1.style.height = _ih + 'px'; //执行
  216. }
  217. if (str == "right") {
  218. var _iw = _iL + _iparentwidth//获取拉伸后窗体改变的宽度
  219. if (_iw < _dragMinWidth) {
  220. _iw = _dragMinWidth
  221. } else if (_iw > _maxw) {
  222. _iw = _maxw;
  223. }; //判断改变后的宽度有没有低于自己设置的最小宽度,如果有就变成最小的宽度,
  224. //第二判断改变后的宽度有没有大于自己设计的最大宽度如果有就命改变后的宽度变成最大的宽度
  225. obj1.style.width = _iw + 'px'; //执行
  226. }
  227. if (str == "top") {
  228. var _ih = _iparentheight - _iT //获取拉伸后窗体改变的高度 向下拉就是窗体剩余的高度
  229. obj1.style.top = _iparenttop + _iT + 'px'; //执行窗体改变后距离可视窗口头部的距离
  230. if (obj1.style.top < '0') {
  231. obj1.style.top = '0px';
  232. document.onmousemove = null;
  233. } //判断刚刚赋予的值有没有小于0 防止窗口拉伸到外面
  234. if (_ih < _dragMinHeight) {//之前定义了一个属性值高度防止小于窗体高度
  235. var _bh = _ih //赋予值
  236. _ih = _dragMinHeight; //赋予值
  237. obj1.style.top = (_iparenttop + _iT) - (_dragMinHeight - _bh) + 'px'; //(之前距离头部的距离 + 要添加的y值) - (之前设置的最小高度值 - 获取拉伸后窗体改变的高度)
  238. }
  239. obj1.style.height = _ih - '2' + 'px'; //赋予
  240. }
  241. if (str == "left") {
  242. var _iw = _iparentwidth - _iL // 窗体改变前的宽度 减去 窗体拉伸的长度
  243. obj1.style.left = _iparentleft + _iL + 'px'; //当前窗口距离可视窗口左部的距离 + 窗体要移动的距离 (通常为负数)
  244. if (_iw < _dragMinWidth) {//之前定义了一个属性值宽度防止小于窗体宽度
  245. var _bl = _iw
  246. _iw = _dragMinWidth
  247. obj1.style.left = (_siparentleft + _iL) - (_dragMinWidth - _bl) + 'px'; //(之前距离左边的距离 + 要添加的x值) - (之前设置的最小宽度值 - 获取拉伸后窗体改变的宽度)
  248. }
  249. obj1.style.width = _iw - '2' + 'px';
  250. }
  251. if (str == "rightBottom") {
  252. var _iw = _iL + _iparentwidth; //获取拉伸后窗体改变的宽度
  253. var _ih = _iT + _iparentheight; //获取拉伸后窗体改变的高度
  254. if (_iw < _dragMinWidth) {//之前定义了一个属性值宽度防止小于窗体宽度
  255. _iw = _dragMinWidth //赋予值
  256. } else if (_iw > _maxw) {
  257. _iw = _maxw;
  258. }; //防止扩张的时候超出向右扩张最大范围
  259. obj1.style.width = _iw - '2' + 'px'; //-2 是窗体的div本身的厚度
  260. if (_ih < _dragMinHeight) {//之前定义了一个属性值高度防止小于窗体高度
  261. _ih = _dragMinHeight; //赋予值
  262. } else if (_ih > _maxh) {
  263. _ih = _maxh;
  264. }; //防止扩张的时候超出向下扩张最大高度
  265. obj1.style.height = _ih + 'px'; //赋予值
  266. }
  267. if (str == "rightTop") {
  268. var _iw = _iL + _iparentwidth; //获取拉伸后窗体改变的宽度
  269. var _ih = _iparentheight - _iT; //获取拉伸后窗体改变的高度
  270. obj1.style.top = _iparenttop + _iT + 'px'; //当前窗口距离可视窗口顶部的距离 + 改变后的距离
  271. if (obj1.style.top < '0') { obj1.style.top = '0px'; document.onmousemove = null; } //为了防止拉伸的时候超出边界
  272. if (_iw < _dragMinWidth) {//之前定义了一个属性值宽度防止小于窗体宽度
  273. _iw = _dragMinWidth //赋予值
  274. } else if (_iw > _maxw) { _iw = _maxw; }; //如果改变后的宽度超出最大的宽度则。
  275. obj1.style.width = _iw + 'px'; //赋予值
  276. if (_ih < _dragMinHeight) {//之前定义了一个属性值高度防止小于窗体高度
  277. var _bh = _ih //赋予值
  278. _ih = _dragMinHeight; //赋予值
  279. obj1.style.top = (_iparenttop + _iT) - (_dragMinHeight - _bh) + 'px'; //(之前距离头部的距离 + 要添加的y值) - (之前设置的最小高度值 - 获取拉伸后窗体改变的高度)
  280. } else if (_ih > (_iparenttop + _iparentheight)) {
  281. _ih = (_iparenttop + _iparentheight)
  282. }; //如果扩展的高度超过了 (当前窗口距离可视窗口顶部的距离 + 当前窗口的高度)则防止扩张的时候超出范围
  283. obj1.style.height = _ih - '2' + 'px'; //赋予值
  284. }
  285. if (str == "leftTop") {
  286. var _iw = _iparentwidth - _iL // 窗体改变前的宽度 减去 窗体拉伸的长度
  287. obj1.style.left = _iparentleft + _iL + 'px'; //当前窗口距离可视窗口左部的距离 + 窗体要移动的距离 (通常为负数)
  288. var _ih = _iparentheight - _iT //获取拉伸后窗体改变的高度
  289. obj1.style.top = _iparenttop + _iT + 'px'; //当前窗口距离可视窗口顶部的距离 + 改变后的距离
  290. if (obj1.style.top < '0') { obj1.style.top = '0px'; document.onmousemove = null; } //为了防止拉伸的时候超出边界
  291. if (_iw < _dragMinWidth) {//之前定义了一个属性值宽度防止小于窗体宽度
  292. var _bl = _iw; //赋予值
  293. _iw = _dragMinWidth; //赋予值
  294. obj1.style.left = (_iparentleft + _iL) - (_dragMinWidth - _bl) + 'px'; //(之前距离左边的距离 + 要添加的x值) - (之前设置的最小宽度值 - 获取拉伸后窗体改变的宽度)
  295. } else if (_iw > (_iparentleft + _iparentwidth)) {
  296. _iw = (_iparentleft + _iparentwidth)
  297. }; //如果改变后的宽度超过当前窗口距离可视窗口左部的距离 + 窗体改变前的宽度则
  298. obj1.style.width = _iw - '2' + 'px'; //赋予值
  299. if (_ih < _dragMinHeight) {//之前定义了一个属性值高度防止小于窗体高度
  300. var _bh = _ih; //赋予值
  301. _ih = _dragMinHeight; //赋予值
  302. obj1.style.top = (_iparenttop + _iT) - (_dragMinHeight - _bh) + 'px'; //(之前距离头部的距离 + 要添加的y值) - (之前设置的最小高度值 - 获取拉伸后窗体改变的高度)
  303. } else if (_ih > (_iparenttop + _iparentheight)) {
  304. _ih = (_iparenttop + _iparentheight)
  305. }; //如果扩展的高度超过了 (当前窗口距离可视窗口顶部的距离 + 当前窗口的高度)则防止扩张的时候超出范围
  306. obj1.style.height = _ih - '2' + 'px'; //赋予值
  307. }
  308. if (str == "leftBottom") {
  309. var _iw = _iparentwidth - _iL; // 窗体改变前的宽度 减去 窗体拉伸的长度
  310. obj1.style.left = _iparentleft + _iL + 'px'; //当前窗口距离可视窗口左部的距离 + 窗体要移动的距离 (通常为负数)
  311. var _ih = _iT + _iparentheight; //获取拉伸后窗体改变的高度
  312. if (_iw < _dragMinWidth) {//之前定义了一个属性值宽度防止小于窗体宽度
  313. var _bl = _iw; //赋予值
  314. _iw = _dragMinWidth; //赋予值
  315. obj1.style.left = (_iparentleft + _iL) - (_dragMinWidth - _bl) + 'px'; //(之前距离左边的距离 + 要添加的x值) - (之前设置的最小宽度值 - 获取拉伸后窗体改变的宽度)
  316. } else if (_iw > (_iparentleft + _iparentwidth)) {
  317. _iw = (_iparentleft + _iparentwidth)
  318. }; //如果改变后的宽度超过当前窗口距离可视窗口左部的距离 + 窗体改变前的宽度则
  319. obj1.style.width = _iw - '2' + 'px'; //赋予值
  320. if (_ih < _dragMinHeight) {//之前定义了一个属性值高度防止小于窗体高度
  321. _ih = _dragMinHeight; //赋予值
  322. } else if (_ih > _maxh) {
  323. _ih = _maxh;
  324. }; //防止扩张的时候超出向下扩张最大高度
  325. obj1.style.height = _ih - '2' + 'px'; //赋予值
  326. }
  327. if (((str == 'left' || str == 'leftTop' || str == 'leftBottom') && _iw == _dragMinWidth) || ((str == 'top' || str == 'rightTop' || str == 'leftTop') && _ih == _dragMinHeight)) {
  328. document.onmousemove = null;
  329. }; //是为了当使用时拉伸时不会低于最小值
  330. return false;
  331. },
  332. "mouseup": function () {//拉伸结束
  333. document.onmousemove = null;
  334. document.onmouseup = null;
  335. if ($("#U_UF_F_drag_flag")[0]) {
  336. U.selectEl("#U_UF_F_drag_flag").remove();
  337. }
  338. U.selectEl(document.body).unbind(_windowfun);
  339. }
  340. }
  341. U.selectEl(document.body).bind(_windowfun);
  342. }
  343. //#endregion
  344. //#region 拖动窗体
  345. /*
  346. * 函数功能:元素拖动函数,初始化函数
  347. *
  348. * @param el1 {element} 触发拖拽的对象元素
  349. * @param el2 {element} 被拖拽的对象元素
  350. * @param cb1 {function} 每次拖动时,触发的回调函数
  351. * @param cb2 {function} 拖动完毕时,触发的回调函数
  352. */
  353. U.UF.F.drag = function (el, cb1, cb2) {
  354. /*
  355. * _x {number} 记录元素的left值距离屏幕的差距
  356. * _y {number} 记录元素的top值距离屏幕的差距
  357. * _drag {element} 被拖拽的对象元素
  358. * */
  359. var _x, _y, _l, _t, _drag;
  360. var _event = event || window.event; //var _event = event || window.event;这句话就是定义了一个变量来获取事件对象,因为不同的浏览器获取事件对象的方法有点不太一样,IE下是window.event,标准下是event,为了兼容所以写了event || window.event.
  361. /*
  362. * 说明:
  363. * _event {element} 事件源
  364. * _x {element} 记录元素的left值距离屏幕的差距
  365. * _y {element} 记录元素的top值距离屏幕的差距
  366. * */
  367. _drag = el; //赋值被拖拽的对象元素
  368. _x = _event.clientX; //记录元素的left值距离屏幕的差距
  369. _y = _event.clientY; //记录元素的top值距离屏幕的差距
  370. _l = _drag.offsetLeft; //元素的左偏移
  371. _t = _drag.offsetTop; //元素的右偏移
  372. /*
  373. * 说明:对document树,进行事件的绑定。
  374. * */
  375. var _windowfun = {
  376. /*
  377. * 说明:绑定鼠标移动事件
  378. * _event {element} 事件源
  379. * */
  380. "mousemove": function (event) {
  381. //如果被拖拽的对象存在,执行以下代码
  382. if (_drag) {
  383. /*
  384. * 说明:变量说明
  385. * _event {element} 事件源
  386. * _left {number} 元素水平移动的距离
  387. * _top {number} 元素垂直移动的距离
  388. * body {element} 页面body对象
  389. * */
  390. var _event = event || window.event, //var _event = event || window.event;这句话就是定义了一个变量来获取事件对象,因为不同的浏览器获取事件对象的方法有点不太一样,IE下是window.event,标准下是event,为了兼容所以写了event || window.event.
  391. _newx = _event.clientX - _x,
  392. _newy = _event.clientY - _y,
  393. _left = _newx + _l, // 移动后鼠标的水平距离减去元素未移动时的水平距离,等到元素水平移动的距离。
  394. _top = _newy + _t, // 移动后鼠标的垂直距离减去元素未移动时的垂直距离,等到元素垂直移动的距离。
  395. _body = U.selectEl(document.body)[0]; //页面body对象,用于判断是否超出屏幕可视区域
  396. // if (_left < 0) _left = 0; //如果元素水平移动超出屏幕最左侧,则使元素水平距离在屏幕的最左侧
  397. // if (_left > _body.offsetWidth - _drag.offsetWidth) _left = _body.offsetWidth - _drag.offsetWidth; //如果元素水平移动超出屏幕最右侧,则使元素水平距离在屏幕的最右侧
  398. // if (_top < 0) _top = 0; //如果元素垂直移动超出屏幕最上侧,则使元素垂直距离在屏幕的最上侧
  399. // if (_top > (_body.offsetHeight - _drag.offsetHeight)) _top = (_body.offsetHeight - _drag.offsetHeight); //如果元素垂直移动超出屏幕最下侧,则使元素垂直距离在屏幕的最下侧
  400. // _drag.style.cursor = 'move'; //改变被拖拽的对象元素的鼠标形状
  401. _drag.style.left = _left + 'px'; //改变被拖拽的对象元素的水平位置
  402. _drag.style.top = _top + 'px'; //变被拖拽的对象元素的垂直位置
  403. if (!$("#U_UF_F_drag_flag")[0] && (_newx != 0 || _newy != 0)) {
  404. var _div = $$("div", { "style": { "cssText": "width: 100%;height: 100%;z-index: 99999;position: absolute;top:0;left:0;" }, "id": "U_UF_F_drag_flag" }, document.body);
  405. }
  406. if (cb1 && typeof cb1 == "function" && _newx != 0 && _newy != 0) { cb1(); } //如果有拖动时的回调函数,则执行回调函数。
  407. }
  408. },
  409. /*
  410. * 说明:绑定松开鼠标事件
  411. * event {element} 事件源
  412. * */
  413. "mouseup": function (event) {
  414. //如果有拖动完成的回调函数,则执行回调函数。
  415. if (_drag && cb2 && typeof cb2 == "function") { cb2(el) };
  416. if ($("#U_UF_F_drag_flag")[0]) {
  417. U.selectEl("#U_UF_F_drag_flag").remove();
  418. }
  419. //清空被拖拽的对象元素
  420. _drag = null;
  421. U.selectEl(document.body).unbind(_windowfun);
  422. }
  423. }
  424. U.selectEl(document.body).bind(_windowfun);
  425. }
  426. //#endregion
  427. //#region 拖动选择元素 暂未修改
  428. /*
  429. * 选取元素带虚拟框 一般常用于选取元素
  430. *
  431. * @param {element} 拖动元素
  432. */
  433. U.UF.F.dragSelect = function (el, fun) {
  434. //右键处理
  435. if (event.button != 2) {
  436. var _x,
  437. _y,
  438. _dragel,
  439. _mousep = U.UF.EL.getMousePosition(el), //鼠标位置
  440. _record = { x: _mousep.x, y: _mousep.y },
  441. //拖动函数的处理
  442. _mousemove = function () {
  443. //拖动的处理
  444. U.UF.F.dragSelect.drag(el, _mousep, _dragel, fun, _record);
  445. },
  446. //拖动释放的处理
  447. _mouseup = function () {
  448. U.selectEl(_dragel).remove();
  449. //释放取消绑定的处理
  450. U.selectEl(document).unbind({
  451. "mousemove": _mousemove,
  452. "mouseup": _mouseup
  453. });
  454. U.selectEl(el).unbind({
  455. "scroll": _mousemove
  456. });
  457. };
  458. //记录滚动条位置
  459. _mousep.left = el.scrollLeft;
  460. _mousep.top = el.scrollTop;
  461. _x = _mousep.x; //鼠标的x轴坐标
  462. _y = _mousep.y; //鼠标的y轴坐标
  463. //创建选择元素
  464. _dragel = $$("div", { "style": { "cssText": "position:absolute;width:0;height:0;font-size:0;margin:0;padding:0;border:1px solid #89b1e6;background-color:#c3d5ed;z-index:1000;filter:alpha(opacity:60);opacity:.6;background-image: url(/img/UXZT.png); display: inline-block; z-index: 1000; zoom: 1;" + "top:" + _y + "px;left:" + _x + "px;zIndex:" + US.ZINDEX + 1 } }, el);
  465. //绑定元素的处理
  466. U.selectEl(document).bind({
  467. "mousemove": _mousemove,
  468. "mouseup": _mouseup
  469. });
  470. U.selectEl(el).bind({
  471. "scroll": _mousemove
  472. });
  473. }
  474. else {
  475. if (el.dragel) {
  476. el.dragel = null;
  477. }
  478. }
  479. }
  480. /*
  481. * 直接拖动元素不带虚拟框 一般常用于图标移动
  482. *
  483. * @param {element} 拖动元素
  484. */
  485. U.UF.F.dragSelect.drag = function (el, mouseup, dragel, fun, record) {
  486. var _m = event.type == "scroll" ? record : U.UF.EL.getMousePosition(el), //当前鼠标的位置
  487. _left = mouseup.x + mouseup.left, //滚动条left
  488. _top = mouseup.y + mouseup.top, //滚动条top
  489. _ctop = _m.y + el.scrollTop,
  490. _cleft = _m.x + el.scrollLeft,
  491. _w = Math.abs(_cleft - _left), //拖动后的长
  492. _h = Math.abs(_ctop - _top), //拖动后的宽
  493. _l = Math.min(_cleft, _left), //拖动后的left
  494. _t = Math.min(_ctop, _top) //拖动后的top
  495. ;
  496. //如果是滚动出发的则找不到鼠标的位置 所以需要通过记录去找
  497. record.x = _m.x;
  498. record.y = _m.y;
  499. //拉动大小变化
  500. U.selectEl(dragel).addAttrArray({ "style": { "cssText": "width:" + _w + "px;height:" + _h + "px;top:" + _t + "px;left:" + _l + "px;" } });
  501. //设置拉伸选取的处理
  502. U.UF.F.dragSelect.isLocation(dragel, el, { "width": _w, "height": _h, "left": _l, "top": _t }, fun);
  503. }
  504. /*
  505. * 选择元素逻辑范围逻辑
  506. *
  507. * @param {object} 选择的范围
  508. */
  509. U.UF.F.dragSelect.isLocation = function (dragel, el, obj, fun) {
  510. var i,
  511. _left,
  512. _top,
  513. _width,
  514. _height,
  515. _arr = [],
  516. _child = U.selectEl(el).Child() //所有的拖选取的元素
  517. ;
  518. //循环子元素的处理
  519. for (i = 0; i < _child.length; i++) {
  520. //处理的元素不是拖选元素
  521. if (_child[i] != dragel) {
  522. _left = _child[i].offsetLeft;
  523. _top = _child[i].offsetTop;
  524. _width = _child[i].offsetWidth;
  525. _height = _child[i].offsetHeight;
  526. //范围判断
  527. if ((obj.left < _left + _width && obj.left + obj.width > _left) && (obj.top < _top + _height && obj.top + obj.height > _top)) {
  528. _arr.push(_child[i]);
  529. }
  530. }
  531. }
  532. //回调处理
  533. if (fun) {
  534. fun(_arr);
  535. }
  536. }
  537. ///*
  538. //* 获取元素选择范围
  539. //*
  540. //* @param {object} 选择的范围
  541. //*/
  542. //U.UF.F.dragSelect.getElementRange = function (el, obj) {//
  543. // // var _UL, _UDE = [0, 0];
  544. // // _UDE[4] = _UL = Math.floor(this.ElO["SW"] / this.W); //每行占位的个数
  545. // // _UDE[0] = ((Math.floor(ULE["Y"] / this.H) - 1) * _UL); //开始的位置
  546. // // _UDE[1] = _UDE[0] + ((Math.ceil((ULE["BY"]) / this.H) - Math.floor(_UDE[0] / _UL)) * _UL); //结束的位置
  547. // // _UDE[2] = Math.min(Math.ceil(ULE["X"] / this.W), _UL) - 1; _UDE[3] = Math.min(Math.ceil(ULE["BX"] / this.W), _UL) - 1; return _UDE;
  548. //}
  549. //#endregion
  550. //#region 拖拉变化
  551. ///*
  552. //* 获取元素选择范围
  553. //*
  554. //* @param {object} 拖选的元素
  555. //* @param {object} 拖选的传参
  556. //*/
  557. //U.UF.F.dragTable = function (el, obj) {
  558. // if (el) {
  559. // obj = obj || {};
  560. // new U.UF.F.dragTable.init(el, obj); //初始化拖选
  561. // }
  562. //}
  563. ///*
  564. //* 拖动初始化
  565. //*
  566. //* @param {object} 拖选的元素
  567. //* @param {object} 拖选的传参
  568. //*/
  569. //U.UF.F.dragTable.init = function (el, obj) {
  570. // var _UDTD = U.selectEl(el),
  571. // _UDSD = _UDTD.parentElement(), //上级元素
  572. // _UDPD = _UDTD.prev(), //上面的兄弟节点
  573. // _UDND = _UDTD.next(); //下面的兄弟节点
  574. // //添加初始化值
  575. // this.UDPD = _UDSD; //上级元素
  576. // this.w = _UDSD.width(); //当前长度
  577. // this.pw = _UDSD.parentElement().width(); //总长度
  578. // this.el = el; //拖动的元素
  579. // this.UE = U.UF.EL.getMousePosition(); //鼠标的位置
  580. // this.prev = _UDPD; //上面的兄弟节点
  581. // this.next = _UDND; //下面的兄弟节点
  582. // this.uw = [_UDPD.width(), _UDND.width()]; //兄弟节点长度
  583. // //拖动参数设置
  584. // U.UF.C.AddObj(this, obj);
  585. // //聚焦
  586. // el.setCapture();
  587. // //拖动元素
  588. // U.selectEl(document.body).bind({
  589. // "mousemove": (this.move = U.UF.C.apply(this, obj.tf ? this.dragB : this.drag)),
  590. // "mouseup": (this.mup = function () { this.up(); })
  591. // });
  592. //}
  593. //U.UF.F.dragTable.init.prototype = {
  594. // //拖动左右使用
  595. // drag: function () {
  596. // var _UDVD = this.prev, //上级元素
  597. // _UDND = this.next, //下面的兄弟节点
  598. // _UW = this.uw, //不变的大小
  599. // _UE = this.UE, //鼠标的位置
  600. // _UME = U.UF.EL.getMousePosition(); //当前处理的鼠标位置
  601. // _UME["X"] = Math.min(Math.max(-_UW[0], _UME["X"] - _UE["X"]), _UW[1]); _UDVD.css("width", _UW[0] + _UME["X"] + "px"); _UDND.css("width", _UW[1] + _UME["X"] + "px"); //拖动大小处理
  602. // if (this.scb) { this.scb() }; //拖动回调
  603. // },
  604. // //拖动菜单
  605. // dragB: function () {
  606. // var _UW,
  607. // _UDPD = this.UDPD, //上级元素
  608. // _UDSD = this.prev, //上级元素
  609. // _UPW = this.pw, //总长度
  610. // _UW = this.uw[0], //上面兄弟节点的长度
  611. // _UE = this.UE, //鼠标的位置
  612. // _UME = U.UF.EL.getMousePosition(); //鼠标位置
  613. // _UME["X"] = Math.max(-_UW, _UME["X"] - _UE["X"]); //获取left
  614. // _UDSD.css("width", _UW + _UME["X"] + "px"); //设置下级兄弟的长度
  615. // _UDPD.css("width", (_UW = (_UME["X"] + this.w)) > this.pw ? _UW + "px" : this.pw + "px"); //设置上级兄弟的长度
  616. // if (this.scb) { this.scb() };
  617. // },
  618. // //拖动释放
  619. // up: function () {
  620. // this.el.releaseCapture(); //释放聚焦
  621. // U.selectEl(document.body).unbind({ "mousemove": this.move, "mouseup": this.mup }); //释放拖动绑定
  622. // if (this.upcb) { this.upcb() }; //回调处理
  623. // }
  624. //}
  625. //#endregion