鼠标按下事件
拖动事件
释放事件（垃圾处理，拖动未成功，内容返回）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var tmpDragObj;
function dragStart(){
tmpDragObj = event.srcElement;
tdiv = document.createElement("div");
tdiv.innerHTML = tmpDragObj.outerHTML;
tdiv.style.display = "block";
tdiv.style.position = "absolute";
tdiv.style.filter = "alpha(opacity=100)";
tdiv.style.cursor = "move";
tdiv.style.width = tmpDragObj.offsetWidth;
tdiv.style.height = tmpDragObj.offsetHeight;
tdiv.style.top = getInfo(tmpDragObj).top;
tdiv.style.left = getInfo(tmpDragObj).left;
document.body.appendChild(tdiv);
lastX = event.clientX;
lastY = event.clientY;
lastLeft = tdiv.style.left;
lastTop = tdiv.style.top;
try
{
tmpDragObj.dragDrop();
}catch(e)
{
}
}
function draging()
{
var tX = event.clientX;
var tY = event.clientY;
tdiv.style.left = parseInt(lastLeft) + tX-lastX;
tdiv.style.top = parseInt(lastTop) + tY-lastY;
}
function getInfo(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;
}
function dragEnd()
{
if (true)
{
var tX=event.clientX;
var tY=event.clientY;
var parentCell=getInfo(ejej);
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)
{
if (tmpDragObj.innerHTML == "") return;
var tempoption = document.createElement("option");
tempoption.value=tmpDragObj.innerHTML;
tempoption.text=tmpDragObj.innerHTML;
ejej.options.add(tempoption);
tmpDragObj.style.backgroundColor = "red";
tdiv.innerHTML = "33333";
document.body.removeChild(tdiv);
return;
}
}
mm = ff(150,15);
}
function ff(aa,ab)//从GOOGLE网站来,用于恢复位置
{
var ac=parseInt(getInfo(tdiv).left);
var ad=parseInt(getInfo(tdiv).top);
var ae=(ac-getInfo(tmpDragObj).left)/ab;
var af=(ad-getInfo(tmpDragObj).top)/ab;
return setInterval(function()
{
if(ab<1)
{
clearInterval(mm);
tdiv.removeNode(true);
tmpDragObj=null;
return
}
ab--;
ac-=ae;
ad-=af;
tdiv.style.left=parseInt(ac)+"px";
tdiv.style.top=parseInt(ad)+"px"
}, aa/ab)
}
function createTable(){
var table_1 = document.createElement("table");
var table_2 = document.createElement("tbody");
for(i=0;i<3;i++){
var row_temp = document.createElement("tr");
for(j=0;j<5;j++){
var td_temp = document.createElement("td");
td_temp.setAttribute("width","100");
td_temp.onmousedown = dragStart;
td_temp.ondrag = draging;
td_temp.ondragend = dragEnd;
td_temp.appendChild(document.createTextNode(i*5+j));
row_temp.appendChild(td_temp);
}
table_2.appendChild(row_temp);
}
table_1.setAttribute("border","1");
table_1.appendChild(table_2);
document.body.appendChild(table_1);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE border="1" width="300">
<TR>
<TD onmousedown="dragStart();" ondrag="draging();" ondragend="dragEnd();" >sdfasdfas</TD>
</TR>
<TR>
<TD onmousedown="dragStart();" ondrag="draging();" ondragend="dragEnd();" >34535345</TD>
</TR>
</TABLE>
<input type="text" name="cmbLevel1"/>
<SELECT NAME="ejej" style="width:220px;">
</SELECT>
<div id="xx"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
createTable();
//-->
</SCRIPT>
</BODY>
</HTML>
分享到：
相关推荐
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
弹出"水印"对话 实训项目二 Word 综合应用示例 1 实训项目二 Word 综合应用示例 框，从而选中文字水印按钮，在文字下拉列表中选择部门绝密选项，在字体下拉列表中 ，选 择黑体，字号和颜色自行设置即可，其他选项...
图片水印：切换到"设计"选项卡下，在页面背景组中，单击"水印"按钮，这个时候会 弹出一个下拉列表，在弹出的下拉列表中选择"自定义水印"选项。弹出"水印"对话框， 从而选中文字水印按钮，在文字下拉列表中选择部门...
弹由"水印" 对话 实训项目二Word综合应用示例 1 实训项目二Word综合应用示例 框，从而选中文字水印按钮，在文字下拉列表中选择部门绝密选项，在字体下拉列表中 ，选 择黑体，字号和颜色自行设置即可，其他选项保持...
一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向多级滑动导航菜单 2.jQuery+CSS漂亮蓝色三级菜单下载 3....
实例063 在下拉列表中进行多选移除 106 实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉...
可使用标准Windows元素创建图形用户界面（GUI）屏幕，包括框架窗口、会话、菜单、工具栏、标签、按钮、复选框、单选按钮、滚动条、滑动调节框、微调框、组合框、树列表、列表框、编辑框以及静态文本等。 通过现有...
12.4.htm 通过下拉列表框来改变容器的背景色 12.5.htm 实演示如何创建CSS文件 12.6.htm 演示一个在网页中应用投影的范例 12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu ...
8.6 工具栏、状态栏及下拉列表 187 0288 制作带历史信息的菜单 187 0289 制作可以拉伸的菜单界面 188 0290 制作类似于XP颜色的下拉页 188 0291 在系统菜单中添加菜单项 189 0292 在状态栏中放置其他组件...
8.6 工具栏、状态栏及下拉列表 187 0288 制作带历史信息的菜单 187 0289 制作可以拉伸的菜单界面 188 0290 制作类似于XP颜色的下拉页 188 0291 在系统菜单中添加菜单项 189 0292 在状态栏中放置其他组件...
6.3 表格实例二：鼠标经过时变色的表格 6.4 表格实例三：日历 6.5 CSS与表单 6.5.1 表单中的元素 6.5.2 像文字一样的按钮 6.5.3 七彩的下拉菜单 6.6 综合实例一：直接输入的Excel表格 6.7 ...
富文本编辑器(Kindeditor):重做了表格编辑功能，包含如下关键特性:重做了工具栏图标，优化了插入表格交互体验，现在点击表格图标按钮，弹出行列选择面板，滑动鼠标选择要插入的表格行数和列数即可实现表格快速插入，...
2) 修改静态编译后“选择列表框”在“单选”属性为真时不显示项目内容的BUG 3) 修改核心库中“播放音乐”命令在没有声卡或声卡被禁用时未正确释放资源的BUG 4) 修改静态编译后“读配置项”命令在第三个参数“配置...
先在一单元格内填入“*”或“~”等符号，然后单击此单元格，向右拖动鼠标，选中横向若干单元格，单击“格式”菜单，选中“单元格”命令，在弹出的“单元格格式”菜单中，选择“对齐”选项卡，在水平对齐下拉列表中...
以下演示具有嵌套下拉列表和自定义拖动图像。 它是一种 WYSIWYG 设计仪表板的工具。 新的小部件可以从左侧的调色板拖到仪表板中，小部件可以通过拖放来移动。安装通过或安装 # Use npmnpm install vue-easy
28.5.htm 下拉列表菜单 28.6.htm 树型导航菜单 28.7.htm 变色标题菜单 第29章（\cha29） 29.1.htm 获取文本框中的内容 29.2.htm 显示和修改文字内容（DHTML） 29.3....