jquery.dragdiv1.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /**可拖拽div插件,可与zTree的拖拽树配合使用**/
  2. ;(function($){
  3. var default_options = {
  4. errorMsg:'目标对象有误',
  5. curTarget: null,
  6. curTmpTarget: null,
  7. targetTree: null,
  8. buddy:null
  9. };
  10. var methods = {
  11. init: function(options) {
  12. var settings = $.extend({}, default_options, options || {});
  13. return this.each(function () {
  14. $(this).data("dragdivData", new $.DragdivList(this, settings));
  15. });
  16. },
  17. bind: function(item) {
  18. this.data("dragdivData").bind(item);
  19. return this;
  20. }
  21. };
  22. $.DragdivList = function(div,options){
  23. function noSel() {
  24. try {
  25. window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  26. } catch(e){}
  27. };
  28. function dragTree2Dom(treeId, treeNodes) {
  29. return !treeNodes[0].isParent;
  30. };
  31. function prevTree(treeId, treeNodes, targetNode) {
  32. return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
  33. };
  34. function nextTree(treeId, treeNodes, targetNode) {
  35. return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
  36. };
  37. function innerTree(treeId, treeNodes, targetNode) {
  38. return targetNode!=null && targetNode.isParent && targetNode.tId == treeNodes[0].parentTId;
  39. };
  40. function dropTree2Dom(e, treeId, treeNodes, targetNode, moveType) {
  41. if (moveType == null && (/item-div/gi.test(e.target.className) || $(e.target).parents(".item-div").length > 0)) {
  42. var zTree = $.fn.zTree.getZTreeObj(options.buddy);
  43. zTree.removeNode(treeNodes[0]);
  44. var newDom = $("span[itemId=" + treeNodes[0].id + "]");
  45. if(typeof currentTabId != 'undefined' && currentTabId){
  46. newDom = $("div[tabid="+currentTabId+"] span[itemId=" + treeNodes[0].id + "]");
  47. }
  48. if (newDom.length > 0) {
  49. newDom.removeClass("item-span-Disabled");
  50. newDom.addClass("item-span");
  51. } else {
  52. $("#" + itemId).append("<span class='item-span' itemId='" + treeNodes[0].id + "'>" + treeNodes[0].name + "</span>");
  53. }
  54. updateType();
  55. } else if ( $(e.target).parents('#'+options.buddy).length > 0) {
  56. var zTree = $.fn.zTree.getZTreeObj(options.buddy),
  57. html=$(e.target).html(),
  58. node = zTree.getNodeByParam("name",html,null),parentNode;
  59. if (node != null && node.isParent) {
  60. parentNode = node;
  61. } else if (node != null && !node.isParent) {
  62. parentNode = node.getParentNode();
  63. }
  64. if (!!parentNode) {
  65. var nodes = zTree.addNodes(parentNode, treeNodes[0]);
  66. zTree.selectNode(nodes[0]);
  67. zTree.removeNode(treeNodes[0]);
  68. updateType();
  69. }
  70. }
  71. };
  72. function dom2Tree(e, treeId, treeNode) {
  73. var target = options.curTarget, tmpTarget = options.curTmpTarget;
  74. if (!target) return;
  75. var zTree = $.fn.zTree.getZTreeObj(options.buddy), parentNode;
  76. if (treeNode != null && treeNode.isParent) {
  77. parentNode = treeNode;
  78. } else if (treeNode != null && !treeNode.isParent) {
  79. parentNode = treeNode.getParentNode();
  80. }
  81. if (tmpTarget) tmpTarget.remove();
  82. if (!!parentNode) {
  83. var nodes = zTree.addNodes(parentNode, {id:target.attr("itemId"), name: target.text()});
  84. zTree.selectNode(nodes[0]);
  85. } else {
  86. target.removeClass("item-span-Disabled");
  87. target.addClass("item-span");
  88. alert(options.errorMsg);
  89. }
  90. updateType();
  91. options.curTarget = null;
  92. options.curTmpTarget = null;
  93. };
  94. function updateType() {
  95. var zTree = $.fn.zTree.getZTreeObj(options.buddy),
  96. nodes = zTree.getNodes();
  97. for (var i=0, l=nodes.length; i<l; i++) {
  98. var num = nodes[i].children ? nodes[i].children.length : 0;
  99. nodes[i].name = nodes[i].name.replace(/ \(.*\)/gi, "") + " (" + num + ")";
  100. zTree.updateNode(nodes[i]);
  101. }
  102. };
  103. function bindMouseDown(e) {
  104. var target = e.target;
  105. if (target!=null && target.className=="item-span") {
  106. var doc = $(document), target = $(target),
  107. docScrollTop = doc.scrollTop(),
  108. docScrollLeft = doc.scrollLeft();
  109. target.addClass("item-span-Disabled");
  110. target.removeClass("item-span");
  111. curDom = $("<span class='item_tmp item-span'>" + target.text() + "</span>");
  112. curDom.appendTo("body");
  113. curDom.css({
  114. "top": (e.clientY + docScrollTop + 3) + "px",
  115. "left": (e.clientX + docScrollLeft + 3) + "px"
  116. });
  117. options.curTarget = target;
  118. options.curTmpTarget = curDom;
  119. doc.bind("mousemove", bindMouseMove);
  120. doc.bind("mouseup", bindMouseUp);
  121. }
  122. if(e.preventDefault) {
  123. e.preventDefault();
  124. }
  125. };
  126. function bindMouseMove(e) {
  127. noSel();
  128. var doc = $(document),
  129. docScrollTop = doc.scrollTop(),
  130. docScrollLeft = doc.scrollLeft(),
  131. tmpTarget = options.curTmpTarget;
  132. if (tmpTarget) {
  133. tmpTarget.css({
  134. "top": (e.clientY + docScrollTop + 3) + "px",
  135. "left": (e.clientX + docScrollLeft + 3) + "px"
  136. });
  137. }
  138. return false;
  139. };
  140. //初始化buddy tree的事件绑定
  141. function initTreeEventBind(){
  142. options.targetTree = $.fn.zTree.getZTreeObj(options.buddy);
  143. if(options.targetTree){
  144. options.targetTree.setting.edit.drag.prev = prevTree;
  145. options.targetTree.setting.edit.drag.next = nextTree;
  146. options.targetTree.setting.edit.drag.inner = innerTree;
  147. options.targetTree.setting.callback.beforeDrag = dragTree2Dom;
  148. options.targetTree.setting.callback.onDrop = dropTree2Dom;
  149. options.targetTree.setting.callback.onMouseUp = dom2Tree;
  150. }
  151. };
  152. function bindMouseUp(e) {
  153. var doc = $(document);
  154. doc.unbind("mousemove", bindMouseMove);
  155. doc.unbind("mouseup", bindMouseUp);
  156. var target = options.curTarget, tmpTarget = options.curTmpTarget;
  157. if (tmpTarget) tmpTarget.remove();
  158. if ($(e.target).parents('#'+options.buddy).length == 0) {
  159. if (target) {
  160. target.removeClass("item-span-Disabled");
  161. target.addClass("item-span");
  162. }
  163. options.curTarget = null;
  164. options.curTmpTarget = null;
  165. }
  166. };
  167. var parseItem = function(data,table){
  168. var html=[];
  169. if(!data.items){
  170. if(!table)table="";//所属表名
  171. html.push(['<span class="item-span"']);
  172. //表明+-+字段名
  173. if(data.id) html.push(' itemId="'+table+"-"+data.id+'"');
  174. if(data.desc) html.push(' itemDesc="'+data.desc+'"');
  175. html.push('>');
  176. if(data.name) html.push(data.name);
  177. html.push('</span>');
  178. }
  179. else{
  180. html.push('<div class="item-div"');
  181. if(data.id) html.push(' itemId="'+data.id+'"');
  182. if(data.desc) html.push(' itemDesc="'+data.desc+'"');
  183. html.push('><div class="title-div">');
  184. if(data.name) html.push(data.name);
  185. html.push('</div>');
  186. for(var i=0,c;c=data.items[i++];){
  187. //将主表信息放进去 data.id
  188. html.push(parseItem(c,data.id));
  189. }
  190. html.push('</div>');
  191. }
  192. return html.join('');
  193. };
  194. this.bind = function(buddy){
  195. if(buddy)
  196. options.buddy = buddy;
  197. initTreeEventBind();
  198. };
  199. if(!options.data)return;
  200. var html=parseItem(options.data);
  201. $(div).html(html).bind("mousedown",bindMouseDown);
  202. }
  203. $.fn.dragdiv = $.fn.dragDiv = function(method){
  204. if(methods[method]) {
  205. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  206. } else {
  207. return methods.init.apply(this, arguments);
  208. }
  209. };
  210. })(jQuery);