js应用实现博客个性主页布局拖拽功能网页设计
“苹果派子”通过精心收集，向本站投稿了2篇js应用实现博客个性主页布局拖拽功能网页设计，下面是小编整理后的js应用实现博客个性主页布局拖拽功能网页设计，欢迎大家阅读借鉴，并有积极分享。
篇1：js应用实现博客个性主页布局拖拽功能网页设计
Jquery的Interface elements for jQuery里面的拖拽布局存在一些bug，效率也比较低，GoogleUI google_drag.js有些乱，不是很容易理解，Discuz!NT Space代码满天飞，所以自己参考GoogleUI的思想，简化和优化了一些操作代码，实现了博客系统基本的拖拽布局的效果，暂时未考虑其他浏览器的兼容性问题，下一步准备改造成Jquery的插件形式，并增加一些渐隐渐现和动画效果，并逐步实现一些ajax的添加删除操作，嵌入基于JQuery的音乐播放器，图片浏览器，文本编辑器。
预览体验：
html代码：
下面的可拖拽模块的mid为其在数据库中的id号；
每td列最后都有一个，并隐藏起来，用来可以推拽元素到此隐藏元素的前面，或者某td列本来没有元素，
也可以拖拽到此列上面：
1
2
3
4
5博客推拽布局示例
6
7
63
64
js代码：
主要是两个对象，dragLayout对象（table元素） 包含 dragModule对象（可拖拽的元素）
1if(typeofgetElementById!=“function”) {
2vargetElementById=function(id) {
3if(typeof(id)==“object”)returnid;
4if(document.getElementById(id)) {returndocument.getElementById(id); }
5else{thrownewError(id+“argument error, can not find”“+id+”“element”); }
6}
7}
8//获取一个element的offset信息，其实就是相对于Body的padding以内的绝对坐标
9functiongetElCoordinate (e) {
10vart=e.offsetTop;
11varl=e.offsetLeft;
12varw=e.offsetWidth;
13varh=e.offsetHeight;
14while(e=e.offsetParent) {
15t+=e.offsetTop;
16l+=e.offsetLeft;
17};return{
18top: t,
19left: l,
20width: w,
21height: h,
22bottom: t+h,
23right: l+w
24}
25}
26
27varguozili=window.guozili||{};
28//整个table布局对象
29guozili.dragLayout=function(cfg) {
30this.targetId=cfg.targetId;
31//推拽完成时的回调函数，可以进行ajax提交
32this.onEnd=cfg.onEnd;
33this.init.apply(this);
34};
35
36guozili.dragLayout.prototype={
37//初始化，读取每列下面的推拽模块div，并且放入dragArray数组中
38init :function {with(this) {
39target=getElementById(this.targetId);
40rows=target.tBodies[0].rows[0];
41column=rows.cells;
42this.dragArray=newArray();
43varcounter=0;
44for(vari=0; i
45varele=column[i];
46
47for(varj=0; j
48varele1=ele.childNodes[j];
49if(ele1.tagName==“DIV”&&ele1.getAttribute(“mid”)) {
50dragArray[counter]=newguozili.dragModule(ele1,this);
51counter++;
52}
53}
54
55}
56}
57}
58};
59//拖拽模块div对象
60guozili.dragModule=function(ele, parent) {
61//对应的div拖拽元素
62this.ele=ele;
63//父对象，即dragLayout对象
64this.parent=parent;
65//标题栏，用于鼠标拖拽
66this.title=this.ele.childNodes[0];
67//计算拖拽element的坐标
68this.eleLeft=getElCoordinate(this.ele).left;
69this.eleTop=getElCoordinate(this.ele).top;
70//记录原先的邻居节点，用来对比是否被移动到新的位置
71this.origNextSibling=ele.nextSibling;
72this.init.apply(this);
73};
74
75guozili.dragModule.prototype={
76init :function() {with(this) {
77var_self=this;
78//获取移动的时候那个灰色的虚线框
79ghostLayer=getElementById(“ghost”);
80//鼠标按下时推拽开始
81title.onmousedown=function(event) {
82_self.dragStart(event);
83}
84title.style.cursor=“move”;
85
86}
87},
88//开始拖拽设定一些位置信息
89dragStart:function(evt) {with(this) {
90var_self=this;
91evt=evt?evt:window.event;
92
93varpostion=getElCoordinate(ele)
94//鼠标相对于浏览器的位置减去元素的位置
95//得出鼠标相对于元素的相对位置，便于拖拽时计算元素的新位置
96x=evt.clientX-postion.left;
97y=evt.clientY-postion.top;
98
99//绝对位置，top和left就起作用了,就可以推拽了
100ele.style.position=“absolute”;
101ele.style.top=postion.top;
102ele.style.left=postion.left;
103ele.style.zIndex=100;
104
105//将那个灰框设定得与正在拖动的对象一样高
106ghostLayer.style.position=“relative”;
107ghostLayer.style.display=“block”;
108ghostLayer.style.height=postion.height;
109ghostLayer.style.width=postion.width;
110//把灰框放到这个对象原先的位置上
111ele.parentNode.insertBefore(ghostLayer, ele.nextSibling);
112
113//鼠标按下再移动的事件，鼠标移动，元素也跟着走
114document.onmousemove=function(event) { _self.drag(event); }
115//释放鼠标的事件
116document.onmouseup=function(event) { _self.dragEnd(event); }
117}
118},
119//拖拽时实现元素跟鼠标走
120drag:function(evt) {with(this) {
121var_self=this;
122evt=evt?evt:window.event;
123//计算元素的新的位置
124ele.style.left=evt.clientX-x;
125ele.style.top=evt.clientY-y;
126ele.style.filter=“alpha(opacity=70)”;
127ele.style.opacity=0.7;
128//被拖拽到的新的元素（当然也可以是原来那个）
129varfound=null;
130//最大的距离
131varmax_distance=10000;
132//遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便前面插入
133for(vari=0; i
134{
135vardragObj=parent.dragArray[i];
136//利用勾股定理计算鼠标到遍历到的这个元素的距离
137vardistance=Math.sqrt(Math.pow(evt.clientX-dragObj.eleLeft,2)+Math.pow(evt.clientY-dragObj.eleTop,2));
138
139if(isNaN(distance)){
140continue;
141}
142//如果更小，记录下这个距离，并将它作为found
143if(distance
144max_distance=distance;
145found=dragObj;
146}
147
148
149}
150//找到落脚点就先把灰框插进去，我们看到的那个灰框停靠的特效
151if(found!=null&&ghostLayer.nextSibling!=found.ele) {
152found.ele.parentNode.insertBefore(ghostLayer, found.ele);
153
154}
155
156
157}
158},
159//鼠标释放时推拽完成
160dragEnd:function(evt) {with(this) {
161var_self=this;
162evt=evt?evt:window.event;
163
164document.onmousemove=null;
165document.onmouseup=null;
166//把拖拽时的position=absolute和相关的那些style都消除
167ele.style.position=“relative”;
168ele.style.filter=“”;
169ele.style.opacity=“”;
170ele.style.zIndex=“”;
171ele.style.left=“”;
172ele.style.top=“”;
173//将灰框隐藏起来
174ghostLayer.style.display=“none”;
175
176//如果现在的邻居不是原来的邻居了后者邻居就是它本身
177if(ghostLayer.nextSibling!=origNextSibling&&ghostLayer.nextSibling!=this.ele) {
178//把被拖拽的这个节点插到灰框的前面
179ghostLayer.parentNode.insertBefore(ele, ghostLayer.nextSibling);
180//从新初始化可推拽元素对象，可以设定它们的新位置，为下面的拖拽操作做准备
181parent.dragArray=null;
182parent.init();
183//回调函数，拖拽完成可对dragArray进行处理
184parent.onEnd.call(this, parent.dragArray);
185
186}
187
188
189
190
191
192}
193}
194
195
196};
css代码：
1body{}{
2font-size:12px;
3}
4
5#main{}{
6TABLE-LAYOUT:fixed;border:1px solid #ccc;
7}
8
9#main td{}{
10VERTICAL-ALIGN:top;WIDTH:32%
11}
12
13.module{}{
14width:100%;
15position:relative;
16border:1px solid #ccc;
17margin-bottom:10px;
18}
19
20.module .title{}{
21border-top:5px solid #ccc;
22background-color:#f5f5f5;
23font-size:13px;
24color:#990000;
25width:100%;
26}
27
28.module .content{}{
29padding:5px;
30}
31
32.block{}{
33width:1px;height:1px;position:relative;overflow:hidden;
34}
35
36#ghost{}{
37border:2px dashed #990000;
38position:absolute;
39display:none;
40top:0px;
41left:0px;
42margin-bottom:10px;
43}
来自：js应用-实现博客个性主页布局拖拽功能
篇2：jquery应用实现博客个性主页布局拖拽功能网页设计
接上一篇：js应用-实现博客个性主页布局拖拽功能 已改造成JQuery插件形式，并新增了一些效果，由于jquery强大的DOM选择器和一些封装的效果，使得代码更加清晰和精简，
引用上一篇：Jquery的Interface elements for jQuery里面的拖拽布局存在一些bug，效率也比较低，GoogleUI google_drag.js有些乱，不是很容易理解，Discuz!NT Space代码满天飞，所以自己参考GoogleUI的思想，简化和优化了一些操作代码，实现了博客系统基本的拖拽布局的效果，暂时未考虑其他浏览器的兼容性问题。下一步准备改造成Jquery的插件形式，并增加一些渐隐渐现和动画效果，并逐步实现一些ajax的添加删除操作，嵌入基于JQuery的音乐播放器，图片浏览器，文本编辑器。
预览体验：
html代码：
下面的可拖拽模块的mid为其在数据库中的id号；
每td列最后都有一个，并隐藏起来，用来可以推拽元素到此隐藏元素的前面，或者某td列本来没有元素，
也可以拖拽到此列上面：
1
2
3
4
5博客推拽布局示例
6
7
55
56
57
58
59
60
61
62
63title1
64+expend ×delete
65content1
66
67
68title4
69+expend ×delete
70content4
71
72
73
74
75
76title2
77+expend ×delete
78content2
79
80
81
82
83
84title3
85+expend ×delete
86content3
87
88
89
90
91
92
93
94
95
96
97new order is：
98
99
100
101
102
js代码：
主要是两个对象，dragLayout对象（table元素） 包含 dragModule对象（可拖拽的元素）
1(function($) {
2
3$.fn.DragLayout=function(obj) {
4//得到所有可拖拽的模块
5this.getModules=function() {
6returnthis.find(“div[@mid]”);
7};
8//得到所有可推拽的模块的位置offset，在后面判断最近元素时候起作用
9this.getModulesPostion=function() {
10vari=0;
11varmodulesPostion={};
12this.modules.each(function() {
13modulesPostion[i]=$(this).offset();
14i++;
15
16});
17
18returnmodulesPostion;
19};
20//初始化模块和模块位置
21this.init=function() {
22this.modules=this.getModules();
23this.modulesPostion=this.getModulesPostion();
24};
25//回调函数，完成事件
26this.onEnd=obj.onEnd;
27//初始化
28this.init();
29var_self=this;
30//循环创建dragModule对象
31returnthis.modules.each(function() {
32newdragModule(this, _self);
33});
34
35}
36
37
38vardragModule=function(ele, parent) {
39//对应的div拖拽元素
40this.ele=$(ele);
41//父对象，即dragLayout对象
42this.parent=parent;
43//标题栏，用于鼠标拖拽
44this.title=$(this.ele.children()[0]);
45
46//记录原先的邻居节点，用来对比是否被移动到新的位置
47this.origNextSibling=this.ele.next();
48this.init.apply(this);
49
50};
51
52dragModule.prototype={
53
54init :function() {with(this) {
55var_self=this;
56//获取移动的时候那个灰色的虚线框
57ghostLayer=$(“#ghost”);
58//鼠标按下时推拽开始
59title.mousedown(function(event) {
60_self.dragStart(event);
61});
62
63title.hover(function() {
64title.fadeIn(“slow”);
65},
66function() {
67
68}
69);
70
71title.css(“cursor”,“move”);
72
73}
74},
75
76//开始拖拽设定一些位置信息
77dragStart:function(evt) {with(this) {
78var_self=this;
79evt=evt?evt:window.event;
80
81//鼠标相对于浏览器的位置减去元素的位置
82//得出鼠标相对于元素的相对位置，便于拖拽时计算元素的新位置
83x=evt.clientX-ele.offset().left;
84y=evt.clientY-ele.offset().top;
85
86//绝对位置，top和left就起作用了,就可以推拽了
87ele.css(“position”,“absolute”).css(“zIndex”,“100”).css(“top”,ele.offset().top).css(“left”,ele.offset().left);
88
89//将那个灰框设定得与正在拖动的对象一样高
90ghostLayer.css(“position”,“relative”).css(“display”,“block”).css(“height”,ele.innerHeight()).css(“width”,ele.innerWidth());
91
92//把灰框放到这个对象原先的位置上
93ghostLayer.insertBefore(ele.next());
94
95//鼠标按下再移动的事件，鼠标移动，元素也跟着走
96$(document).mousemove(function(event) { _self.drag(event);});
97//释放鼠标的事件
98$(document).mouseup(function(event) { _self.dragEnd(event);});
99}
100},
101
102//拖拽时实现元素跟鼠标走
103drag:function(evt) {with(this) {
104
105var_self=this;
106evt=evt?evt:window.event;
107//计算元素的新的位置
108ele.css(“filter”,“alpha(opacity=70)”).css(“opacity”,“0.7”).css(“left”,evt.clientX-x).css(“top”,evt.clientY-y);
109
110//被拖拽到的新的元素（当然也可以是原来那个）
111varfound=null;
112//最大的距离
113varmax_distance=10000;
114//遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便前面插入
115vardistance=null;
116
117vari=0;
118
119parent.modules.each(function() {
120//利用勾股定理计算鼠标到遍历到的这个元素的距离
121distance=Math.sqrt(Math.pow(evt.clientX-parent.modulesPostion[i].left,2)+Math.pow(evt.clientY-parent.modulesPostion[i].top,2));
122i++;
123//如果更小，记录下这个距离，并将它作为found
124if(distance
125max_distance=distance;
126found=$(this);
127}
128});
129
130
131//找到落脚点就先把灰框插进去，我们看到的那个灰框停靠的特效
132if(found!=null&&ghostLayer.next()!=found) {
133
134ghostLayer.insertBefore(found);
135}
136}
137},
138
139//鼠标释放时推拽完成
140dragEnd:function(evt) {with(this) {
141var_self=this;
142evt=evt?evt:window.event;
143//卸载事件
144$(document).unbind(“mousemove”);
145$(document).unbind(“mouseup”);
146
147
148//把拖拽时的position=absolute和相关的那些style都消除
149
150ele.css(“position”,“relative”).css(“filter”,“alpha(opacity=100)”).css(“opacity”,“1”).css(“zIndex”,“”).css(“left”,“”).css(“top”,“”);
151
152//将灰框隐藏起来
153ghostLayer.css(“display”,“none”);
154
155
156//如果现在的邻居不是原来的邻居了后者邻居就是它本身
157if(ghostLayer.next()!=origNextSibling&&ghostLayer.next()!=this.ele) {
158//把被拖拽的这个节点插到灰框的前面
159ele.insertBefore(ghostLayer.next());
160
161//从新初始化可推拽元素对象，可以设定它们的新位置，为下面的拖拽操作做准备
162parent.init();
163
164//回调函数，拖拽完成可对dragArray进行处理
165parent.onEnd.call(this, parent.modules);
166
167}
168
169ghostLayer.insertAfter(parent);
170}
171}
172}
173
174
175
176})(jQuery);
css代码：
Code
1body{}{
2font-size:12px;
3}
4
5input{}{
6border:1px solid #ccc;
7background:#f5f5f5;
8}
9
10#main{}{
11TABLE-LAYOUT:fixed;border:1px solid #ccc;
12}
13
14#main td{}{
15VERTICAL-ALIGN:top;WIDTH:32%
16}
17
18
19#other{}{
20margin:20px;
21}
22
23.module{}{
24width:100%;
25position:relative;
26border:1px solid #ccc;
27margin-bottom:10px;
28padding:0px;
29}
30
31.module .title{}{
32float:left;
33border-top:5px solid #ccc;
34background-color:#f5f5f5;
35font-size:13px;
36color:#990000;
37width:40%;
38}
39
40.module .control{}{
41float:left;
42color:#999;
43border-top:5px solid #ccc;
44background-color:#f5f5f5;
45width:60%;
46margin:0px;
47text-align:right;
48cursor:pointer;
49}
50
51.module .content{}{
52float:left;
53padding:5px;
54border:1px solid #f5f5f5;
55width:96%;
56}
57
58.block{}{
59width:1px;height:1px;position:relative;overflow:hidden;
60}
61
62#ghost{}{
63border:2px dashed #990000;
64position:absolute;
65display:none;
66top:0px;
67left:0px;
68margin-bottom:10px;
69}
来自：jquery应用-实现博客个性主页布局拖拽功能
【js应用实现博客个性主页布局拖拽功能网页设计】相关文章：
文档为doc格式