`
hyw520110
  • 浏览: 219639 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

鼠标实现表格内容拖动到下拉列表框

    博客分类:
  • js
阅读更多
鼠标按下事件
拖动事件
释放事件(垃圾处理,拖动未成功,内容返回)
<!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>
分享到:
评论

相关推荐

    鼠标左键按下后拖动实现多选

    在MFC(Microsoft Foundation Classes)框架中,创建一个对话框程序并实现自定义按钮以及鼠标左键按下后的拖动多选功能,涉及到一系列的Windows消息处理和用户界面交互技术。以下将详细介绍这一过程中的关键知识点。...

    excel表格自由绘制边框优质资料.doc

    - 接着,在“开始”菜单的“边框”下拉列表中选择“无边框”,这将移除表格的所有边框。 2. **添加特定边框**: - 如果只想为某一行或某一列添加边框,只需选中该行或列,然后在“边框”选项中选择相应的边框样式...

    QT下拉框样式表设置

    `QAbstractItemView`是所有视图类的基类,这里特指当`QComboBox`的下拉列表展开时的视图样式。`border-image`同样用于设置边框图像;`selection-color`和`color`分别设置了选中项的文字颜色和未选中项的文字颜色。 ...

    PPT-表格的插入.pptx

    - **步骤4**:或者,你可以选择下拉列表中的“插入表格”命令,打开“插入表格”对话框,在这里直接输入行数和列数,并根据需要在“自动调整”选项中设置列宽,最后点击“确定”。 2. **手工绘制复杂表格**: - *...

    Excel2021中使用下拉列表控制显示不同系列的图表.docx

    - 使用鼠标左键在工作表上拖动创建组合框控件,并将系列名称(如“产品A”,“产品B”)输入或粘贴到一列中,本例中在I1:I3区域。 2. **设置组合框控件**: - 右键点击组合框,选择“设置控件格式”,进入“控制...

    PPT-表格的插入.pdf

    - 然后,你可以通过在弹出的示意表格上拖动鼠标来选择所需的行数和列数,松开鼠标后,表格就会自动插入到光标所在位置。 - 另一种方法是,在下拉列表中选择“插入表格”,打开“插入表格”对话框,直接输入行数和...

    excel表格复选框如何打钩.doc

    在Excel2013中,我们可以通过点击“文件-选项-自定义功能区”在右侧“自定义功能区“下拉列表中选中“主选项卡”,在下面的列表中选中“开发工具”复选框,然后确定。之后会发现主选项卡上多出一项--开发工具,其中...

    C#与数据库相结合下拉菜单和树形目录

    3. 数据源的配置:可以通过数据绑定将数据库中的数据填充到下拉列表。这可以通过使用SqlDataSource控件连接到SQL Server数据库,然后设置SelectCommand来执行查询获取数据。 4. 将SqlDataSource与DropDownList关联,...

    中如何插入表格PPT学习教案.pptx

    2. 同样在“插入”选项卡的“表格”组中选择“表格”,然后在下拉列表中用鼠标拖动选择需要的行数和列数。 第三,使用“插入表格”命令: 1. 光标置于所需位置。 2. 点击“插入表格”,弹出“插入表格”对话框,你...

    PowerPoint 2010演示文稿制作_编辑演示文稿对象_插入表格.pdf

    在幻灯片上单击并拖动鼠标绘制表格的边界,形成矩形框。然后,再次点击【表格工具】→【设计】选项卡下的【绘图边框】组中的【绘制表格】按钮,用鼠标在矩形内绘制行线、列线或斜线。如果绘制错误,可使用【擦除】...

    表格排版——Word 2021书籍排版完全手册6.docx

    选定需要设置边框和底纹的表格部分或整个表格,单击"表格设计"功能按钮,在下面的"绘图边框"功能选项区选择"边框"或"底纹"或"笔样式"或"笔划粗细"或"笔颜色"选项按钮,在下拉列表中选择需要的框线部位、底纹样式、框...

    javascript 特效

    本专题将深入探讨JavaScript实现的各种特效,包括页面特效、按钮特效、鼠标特效、表格特效以及下拉列表、单选框和复选框的交互优化。 1. 页面特效:页面特效通常涉及到页面的加载、过渡动画、背景滚动、头部固定、...

    excle办公软件制作表格以及表格格式的调整方法.doc

    - 要移动表格,只需选中表格,然后按住鼠标左键拖动到工作表的任何位置。 - 调整列宽和行高,可将鼠标放在列边界或行边界,当鼠标变成双向箭头时,按住并拖动以改变宽度或高度。 3. 表格样式和颜色的设置: - 在...

    Dreamweaver网页设计之:框架.pptx

    3. 自定义框架样式:先选择【查看】|【可视化助理】|【框架边框】命令,在页面中显示出框架的边框,然后将光标放置在框架的的边框线上,当指针变为双指的箭头时,按住鼠标左键拖动边框到欲建框架的位置。 4. 创建...

    如何在wps表格中设置数字显示范围.doc

    第二种方法:在表格某个列连续输入两个相同的数,框住这两个单元格然后按住鼠标左键往下拉 这种方法可以让数字下拉使数值不变,同时也可以快速地将数字下拉到所需的位置。 WPS 表格动态改版数据显示技巧 在 WPS ...

    exlce表格处理软件一PPT课件.pptx

    * 使用填充柄自动填充相同数据:选择包含要填写内容的单元格,将鼠标指针移动到单元格右下角的填充柄上,然后按住鼠标左键向下拖动,选择填充的范围。 四、编辑工作表 * 修改单元格中的内容:选中有错误的单元格,...

    datagridview的行拖动和插入combox

    标题“datagridview的行拖动和插入combox”涉及到两个关键功能:行拖动(Row Dragging)和在单元格中插入ComboBox(下拉列表框)。这两个特性可以极大地增强用户界面的交互性和功能性。 首先,让我们深入了解一下行...

    让Excel巧妙实现表格自动隔行着色.docx

    选择“条件1”下方左侧方框右侧的下拉按钮,然后在列表中选择“公式”选项。这样做允许我们使用Excel的内置函数来定义着色的逻辑。 在右侧的公式框中,输入公式:`=MOD(ROW(),2)=0`。这个公式的含义是检查当前行号...

    计算机二级Excel表格题库答案(解题步骤).doc

    首先,我们需要单击【插入】选项卡下【表格】组中的【数据透视表】按钮,从弹出的下拉列表中选择"数据透视表",弹出"创建数据透视表"对话框,设置"表/区域"为"产品销售汇总图表!$A$1:$E$21",选择放置数据透视表的...

Global site tag (gtag.js) - Google Analytics