- 浏览: 74292 次
- 性别:
- 来自: 河北
最新评论
-
alovn:
firefox不能使用
js时间控件(年月日时分秒) -
woozyangel:
火狐下悲剧了
js时间控件(年月日时分秒) -
tiaccp:
看不太懂啊
生成7位随机数字的js -
heiwoshimaoya:
这个控件不知道应该用到什么地方! 感觉没什么实用性!请指教!
...
js时间控件(年月日时分秒) -
davidyao:
测试成功,谢谢
js时间控件(年月日时分秒)
<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
height:20px;
padding-left:5px;
font-weight:bold;
}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
var Drag={dragged:false,
ao:null,
tdiv:null,
dragStart:function(){
Drag.ao=event.srcElement;
if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
Drag.ao=Drag.ao.offsetParent;
Drag.ao.style.zIndex=100;
}else
return;
Drag.dragged=true;
Drag.tdiv=document.createElement("div");
Drag.tdiv.innerHTML=Drag.ao.outerHTML;
Drag.ao.style.border="1px dashed red";
Drag.tdiv.style.display="block";
Drag.tdiv.style.position="absolute";
Drag.tdiv.style.filter="alpha(opacity=70)";
Drag.tdiv.style.cursor="move";
Drag.tdiv.style.border="1px solid #000000";
Drag.tdiv.style.width=Drag.ao.offsetWidth;
Drag.tdiv.style.height=Drag.ao.offsetHeight;
Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
document.body.appendChild(Drag.tdiv);
Drag.lastX=event.clientX;
Drag.lastY=event.clientY;
Drag.lastLeft=Drag.tdiv.style.left;
Drag.lastTop=Drag.tdiv.style.top;
},
draging:function(){//重要:判断MOUSE的位置
if(!Drag.dragged||Drag.ao==null)return;
var tX=event.clientX;
var tY=event.clientY;
Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
for(var i=0;i<parentTable.cells.length;i++){
var parentCell=Drag.getInfo(parentTable.cells[i]);
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
var subTables=parentTable.cells[i].getElementsByTagName("table");
if(subTables.length==0){
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
parentTable.cells[i].appendChild(Drag.ao);
}
break;
}
for(var j=0;j<subTables.length;j++){
var subTable=Drag.getInfo(subTables[j]);
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
break;
}else{
parentTable.cells[i].appendChild(Drag.ao);
}
}
}
}
}
,
dragEnd:function(){
if(!Drag.dragged)return;
Drag.dragged=false;
Drag.mm=Drag.repos(150,15);
Drag.ao.style.borderWidth="0px";
Drag.ao.style.borderTop="1px solid #3366cc";
Drag.tdiv.style.borderWidth="0px";
Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;
to.bottom=to.top+theight;
return to;
},
repos:function(aa,ab){
var f=Drag.tdiv.filters.alpha.opacity;
var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
var kf=f/ab;
return setInterval(function(){if(ab<1){
clearInterval(Drag.mm);
Drag.tdiv.removeNode(true);
Drag.ao=null;
return;
}
ab--;
tl-=kl;
tt-=kt;
f-=kf;
Drag.tdiv.style.left=parseInt(tl)+"px";
Drag.tdiv.style.top=parseInt(tt)+"px";
Drag.tdiv.filters.alpha.opacity=f;
}
,aa/ab)
},
inint:function(){//初始化
for(var i=0;i<parentTable.cells.length;i++){
var subTables=parentTable.cells[i].getElementsByTagName("table");
for(var j=0;j<subTables.length;j++){
if(subTables[j].className!="dragTable")break;
subTables[j].rows[0].className="dragTR";
subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
}
}
document.onmousemove=Drag.draging;
document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();
function _show(str){
var w=window.open('','');
var d=w.document;
d.open();
str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
str=str.replace(/\r/g,"<br />\n");
d.write(str);
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
<td width="25%" valgin="top">
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td><b>GMAIL</b></td>
</tr>
<tr>
<td>暂时无法显示GMAIL内容</td>
<tr>
</table><table border=0 class="dragTable" cellspacing="0">
<tr>
<td>新浪体育</td>
</tr>
<tr>
<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>焦点</td>
</tr>
<tr>
<td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td>
<tr>
</table>
</td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>中关村在线</td>
</tr>
<tr>
<td>新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td>
<tr>
</table></td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>网易商业</td>
</tr>
<tr>
<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
<tr>
</table> <table border=0 class="dragTable" cellspacing="0">
<tr>
<td>黑可天下</td>
</tr>
<tr>
<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
<tr>
</table>
</td>
</tr>
</table>
<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
</body>
</html>
发表评论
-
url编码与转码
2010-09-20 14:27 1398url编码与转码 因为有些符号在URL中是不能直接传递的 ... -
转 automation服务器不能创建对象的问题的解决方案总结大全
2010-06-10 17:32 2315我工作中的应用系统都是jsp的,大量javascript程序, ... -
js时间控件(年月日时分秒)
2009-09-01 10:03 10721这部分是时间控件的的js代码,NewTime.js ... -
生成7位随机数字的js
2009-08-25 18:19 1652<script>var str="qwe ... -
js 正则表达式验证邮箱事例
2009-08-25 18:17 1247if(email.value.length!=0) { ... -
js 很好的下拉菜单
2009-08-25 18:16 777<!DOCTYPE HTML PUBLIC " ... -
js 新闻切换技术,163、msn那种
2009-08-25 18:15 795<!DOCTYPE html PUBLIC " ... -
js 漂亮的仿flash菜单,来自蓝色经典
2009-08-25 18:13 946<style>/* 先把这个 xmenu 的样式放 ... -
js 一个非常不错的loading 效果.
2009-08-25 18:12 874<html><head><met ... -
js 超级强大的表单验证
2009-08-25 18:11 891<title>表单验证类 Validator v1 ... -
js 日历
2009-08-25 18:09 994<!DOCTYPE HTML PUBLIC " ... -
js 客户端静态页面玩分页
2009-08-25 18:08 965<!DOCTYPE HTML PUBLIC " ... -
js 经典的带阴影的可拖动的浮动层
2009-08-25 18:07 903<!DOCTYPE HTML PUBLIC " ... -
js 类似与QQ的好友/黑名单之类的树型菜单
2009-08-25 18:04 681<!DOCTYPE HTML PUBLIC " ... -
js 省市县三级联动菜单
2009-08-25 18:01 3463<!DOCTYPE HTML PUBLIC " ... -
js 自动添加任意数量的表单内容
2009-08-25 17:58 915<html><script language ... -
js计算文本框里的字符个数
2009-08-25 17:53 2155<SCRIPT language=JavaScript& ... -
在光标位置插入字符实例
2009-08-13 09:06 12941 指定某文本部分进行操作(添加,删除,替换) <! ... -
javascript倒计时
2009-08-10 15:11 1843第一种:精确到秒的javascript倒计时代码 ...
相关推荐
javascript div拖动层 ,代码简单。
jquery div拖动排序效果代码是一款打开从左到右慢慢展开,可自由拖动排序特效.
DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
js div拖动动画运行轨迹效果代码是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码。
js拖动div并拖动DIV的大小,js拖动div并拖动DIV的大小
可以实现行拖动,div拖动,图片拖动,例子中是行之间的拖动。
js实现div拖动功能 js实现div拖动功能 js实现div拖动功能 js实现div拖动功能
JS做的隐藏与显示DIV可拖动弹出层实例代码 学习参考
js div浮动层拖拽效果代码是一款支持水平和垂直div拖动锁定代码。
原生js制作简单的浮动div层拖动叠加效果
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
jquery编写HTML 鼠标可拖动层DIv 整理源代码。比网络上的其他鼠标拖动效果比较小巧,结构清楚,没有那么多花里胡哨的垃圾代码。
利用js脚本实现在页面拖动窗口的效果,类似于在windows平台的拖动窗口,效果可嘉,不妨一试。
利用JS实现可拖动的DIV效果,在原有基础上增加的限制在一定区域内的效果。方便,易用。可以很方便地移动到您的工程里面
javascript 实现可拖动的层(DIV),支持兼容性
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。
js加div 窗口拖动实现、js加div 窗口拖动实现、Ajax后台保存窗口属性值
div拖动范围限制,纯js事件绑定 附详细解释
研究3天,3分不贵吧,学js贵在会偷,哈哈哈