不知道是否很难的问题 ASP没这么强吧,多半是XML和JS的能力了 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Pic</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css>TD { FONT-SIZE: 12px; LINE-HEIGHT: 24px; TEXT-ALIGN: center}</STYLE><SCRIPT language=javascript>function fOnDragStart(str){ window.event.dataTransfer.effectAllowed="all"; window.event.dataTransfer.setData("Text", str); window.event.dataTransfer.clearData("HTML"); window.event.dataTransfer.clearData("Image");}function DropArticle(){ var oElem = event.srcElement; if( oElem == null ) return false; while(oElem) { if( oElem.tagName.toLowerCase() == "td" ) break; oElem = oElem.parentElement; } oElem.style.backgroundColor = "#FFFFFF" idstring=window.event.dataTransfer.getData("Text"); if (idstring==null) return false; oElem.innerHTML = "<IMG width=100 height=60 src="+idstring+">"}function OverDrag(){ var oElem = event.srcElement; while(oElem) { if( oElem.tagName.toLowerCase() == "td" ) break; oElem = oElem.parentElement; } oElem.style.backgroundColor = "blue" event.returnValue = false; if (window.event.dataTransfer.getData("Text")) window.event.dataTransfer.dropEffect = "link";}</SCRIPT><META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD><BODY><TABLE cellSpacing=0 cellPadding=0 width=100% border=1> <TBODY> <TR> <TD colspan="5">表b</TD> </TR> <TR> <TD><IMG id=pic1 ondragstart=fOnDragStart(this.src) height=60 src="1.gif" width=100></TD> <TD><IMG id=pic2 ondragstart=fOnDragStart(this.src) height=60 src="2.gif" width=100></TD> <TD><IMG id=pic3 ondragstart=fOnDragStart(this.src) height=60 src="3.gif" width=100></TD> <TD><IMG id=pic4 ondragstart=fOnDragStart(this.src) height=60 src="4.gif" width=100></TD> <TD><IMG id=pic5 ondragstart=fOnDragStart(this.src) height=60 src="5.gif" width=100></TD> </TR> </TBODY></TABLE><br><TABLE width=100% height="160" border=0 cellPadding=3 cellSpacing=1 bgColor=#000000> <TBODY> <TR bgColor=#ffffff> <TD colspan="5" bgColor=#ffffff >表a</TD> </TR> <TR bgColor=#ffffff> <TD width="20%" bgColor=#ffffff id=td1 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD width="20%" bgColor=#ffffff id=td2 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD width="20%" bgColor=#ffffff id=td3 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD width="20%" bgColor=#ffffff id=td4 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD width="20%" bgColor=#ffffff id=td5 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> </TR> <TR bgColor=#ffffff> <TD bgColor=#ffffff id=td6 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td7 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td8 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td9 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td10 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> </TR> <TR bgColor=#ffffff> <TD bgColor=#ffffff id=td11 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td12 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td13 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td14 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td15 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> </TR> <TR bgColor=#ffffff height="22"> <TD bgColor=#ffffff id=td16 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td17 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td18 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td19 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td20 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> </TR> <TR bgColor=#ffffff height="22"> <TD bgColor=#ffffff id=td21 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td22 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td23 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td24 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> <TD bgColor=#ffffff id=td25 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD> </TR> </TBODY></TABLE></BODY></HTML> 非常感谢楼上,你的代码完全实现了我要的要求.我还想问问:1.如何重置表a(我目前想到的方法是加个刷新)2.如何清除表a中某个单元格显示的内容? (我目前想到的方法是用一个空白的图片来覆盖)3.我发现表a中,拖过去的图片也有拖动的鼠标效果,但没有发生实际的拖动,能否改成具有实际的拖动效果? (是移动,不是复制,表b-->表a那种叫复制) <TD colspan="5" bgColor=#ffffff >表a<button onClick="resetPic()">重置/button></TD><script language="JavaScript" type="text/JavaScript">function resetPic(){var i=1;while(i<26){ eval("document.all.td"+i+".innerHTML=' '") i++}}</script> function DropArticle(){ var oElem = event.srcElement; if( oElem == null ) return false; while(oElem){ if( oElem.tagName.toLowerCase() == "td" ) break; oElem = oElem.parentElement; } oElem.style.backgroundColor = "#FFFFFF" idstring=window.event.dataTransfer.getData("Text"); if (idstring==null) return false; oElem.innerHTML = "<IMG width=100 height=60 onClick=this.parentElement.innerHTML=' ' src="+idstring+">"}把DropArticle函数修改成这样然后可以通过单击你拖入的图片来实现清除已拖入的图片 谢谢 duoduobaba(避雷针) 请先到 http://community.csdn.net/Expert/topic/3239/3239619.xml?temp=.2788965领取100分,非常感谢你的帮助,本帖我研究一下,明天结帖如果愿意回答的话,我想多问一个问题:能否保存拖动后的表格结果? 可以保存成文件或保存到数据库中. 因为功能一步步做的,代码比较乱了,为了尽量写的少,拖动时的层的ZOrder放到后面了,看起来效果不是很好,不知道是不是你说的那种.保存的问题可以把cellIndex和绑定的图片的src信息写到一个数组里,当点一个按钮提交的时候服务器端保存绑定的信息<HTML><HEAD><TITLE>Pic</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css>TD { FONT-SIZE: 12px; LINE-HEIGHT: 24px; TEXT-ALIGN: center;}</STYLE><SCRIPT language=javascript><!--var theOffsetX=0var theOffsetY=0function fOnDragStart(obj){ var str=obj.src window.event.dataTransfer.effectAllowed="all"; window.event.dataTransfer.setData("Text", str); window.event.dataTransfer.clearData("HTML"); window.event.dataTransfer.clearData("Image"); document.all.movePic.src=str document.all.moveLayer.style.visibility="visible" theOffsetX=event.offsetX theOffsetY=event.offsetY moveLayer() }function moveLayer(){ document.all.moveLayer.style.top=event.clientY-theOffsetY; document.all.moveLayer.style.left=event.clientX-theOffsetX}function DropArticle(){ var oElem = event.srcElement; if( oElem == null ) return false; while(oElem) { if( oElem.tagName.toLowerCase() == "td" ) break; oElem = oElem.parentElement; } oElem.style.border = "inset black 1px" idstring=window.event.dataTransfer.getData("Text"); if (idstring==null) return false; oElem.innerHTML = "<IMG width=100 height=60 onClick=this.parentElement.innerHTML=' ' src="+idstring+">"}function OverDrag(){ var oElem = event.srcElement; while(oElem) { if( oElem.tagName.toLowerCase() == "td" ) break; oElem = oElem.parentElement; } oElem.style.border = "outset red 3px" event.returnValue = false; if (window.event.dataTransfer.getData("Text")) window.event.dataTransfer.dropEffect = "link";}//--></SCRIPT></HEAD><BODY ondragend="document.all.moveLayer.style.visibility='hidden'" onDrag="moveLayer()"><div id="moveLayer" style="position:absolute; left:254px; top:11px; width:139px; height:71px; z-index:-1; visibility: hidden;"> <IMG id=movePic height=60 src="" width=100 style="filter: Alpha(Opacity=50)"> </div><TABLE cellSpacing=0 cellPadding=0 width=100% border=1> <TBODY> <TR> <TD colspan="5">表b</TD> </TR> <TR> <TD><IMG id=pic1 ondragstart=fOnDragStart(this) height=60 src="1.jpg" width=100></TD> <TD><IMG id=pic2 ondragstart=fOnDragStart(this) height=60 src="2.jpg" width=100></TD> <TD><IMG id=pic3 ondragstart=fOnDragStart(this) height=60 src="3.jpg" width=100></TD> <TD><IMG id=pic4 ondragstart=fOnDragStart(this) height=60 src="4.jpg" width=100></TD> <TD><IMG id=pic5 ondragstart=fOnDragStart(this) height=60 src="5.jpg" width=100></TD> </TR> </TBODY></TABLE><br><TABLE width=100% height="160" border=1 cellPadding=3 cellSpacing=1 bordercolor="#000000"> <TBODY> <TR> <TD colspan="5" >表a<br> 若需要取消单个拖入的图片单击欲取消的图片即可,要重置所有表格点击 <button onClick="resetPic()">重置</button></TD><script language="JavaScript" type="text/JavaScript">function resetPic(){var i=1;while(i<26){ eval("document.all.td"+i+".innerHTML=' '") i++}}</script> </TR> <TR> <TD width="20%" id=td1 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD width="20%" id=td2 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD width="20%" id=td3 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD width="20%" id=td4 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD width="20%" id=td5 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> </TR> <TR> <TD id=td6 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td7 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td8 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td9 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td10 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> </TR> <TR> <TD id=td11 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td12 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td13 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td14 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td15 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> </TR> <TR height="22"> <TD id=td16 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td17 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td18 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td19 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td20 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> </TR> <TR height="22"> <TD id=td21 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td22 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td23 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td24 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> <TD id=td25 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag() ondragleave="this.style.border = 'inset black 1px'"> </TD> </TR> </TBODY></TABLE></BODY></HTML> 我觉得可以实现。先MARK一下。 保存的问题可以把cellIndex和绑定的图片的src信息写到一个数组里,当点一个按钮提交的时候服务器端保存绑定的信息但我不会写jsp,asp又做不了.能把这个也写出来吗? 如果麻烦的话就算了.本帖今晚结 先定义全局数组var PicInfo = new Array()在function DropArticle()的最后加上一句PicInfo[(oElem.parentElement.rowIndex-1)*5+oElem.cellIndex]=idstring把function DropArticle()中的oElem.innerHTML = "<IMG width=100 height=60 onClick=this.parentElement.innerHTML=' ' src="+idstring+">"改成oElem.innerHTML = "<IMG width=100 height=60 onClick='ClearPic(this.parentElement)' src="+idstring+">"增加一个函数function ClearPic(obj){ obj.innerHTML=' '; PicInfo[(obj.parentElement.rowIndex-1)*5+obj.cellIndex]=''}在页面底部加一个按钮<button onClick="window.location='SavePage.asp?Info='+PicInfo">保存</button>------------------------------------------------------------------------------------------------------------------------------------------------------------然后做一个名为SavePage.asp的页面用于把数据保存到数据库先用Split函数把Request.QueryString("Info")把传来的数据分配到数组里然后把这些数据写入数据库没有写详细代码,你自己写一下试试,要是有什么问题我们再讨论 javascript的文档注释怎么弄? JS如何在mailto的body里面插入超链接(必须要有DisplayName的那种) 页面转换问题?急!! 网站访问问题(自己测试的网站) 这代码错在哪里了?帮忙找下错谢谢啦 iframe如何提交到主页面 实现C/S方式下客户端零维护的js脚本如何写? 怎样让新开的窗口始终在所有窗口的最前面??? 孟子兄:那个式样就只有这些?还有一个重要问题,你能解决吗?(weidegong也一同参与) JS、JQ怎么调用Ctrl+D事件??? 请问一个页面中如何插入两个JS? 问一个层地问题
<HTML><HEAD><TITLE>Pic</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>TD {
FONT-SIZE: 12px; LINE-HEIGHT: 24px; TEXT-ALIGN: center
}
</STYLE><SCRIPT language=javascript>
function fOnDragStart(str){
window.event.dataTransfer.effectAllowed="all";
window.event.dataTransfer.setData("Text", str);
window.event.dataTransfer.clearData("HTML");
window.event.dataTransfer.clearData("Image");
}function DropArticle()
{
var oElem = event.srcElement;
if( oElem == null )
return false;
while(oElem)
{
if( oElem.tagName.toLowerCase() == "td" )
break;
oElem = oElem.parentElement;
}
oElem.style.backgroundColor = "#FFFFFF"
idstring=window.event.dataTransfer.getData("Text");
if (idstring==null) return false;
oElem.innerHTML = "<IMG width=100 height=60 src="+idstring+">"
}function OverDrag()
{
var oElem = event.srcElement;
while(oElem)
{
if( oElem.tagName.toLowerCase() == "td" )
break;
oElem = oElem.parentElement;
}
oElem.style.backgroundColor = "blue"
event.returnValue = false;
if (window.event.dataTransfer.getData("Text"))
window.event.dataTransfer.dropEffect = "link";
}
</SCRIPT><META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=1>
<TBODY>
<TR>
<TD colspan="5">表b</TD>
</TR>
<TR>
<TD><IMG id=pic1 ondragstart=fOnDragStart(this.src) height=60 src="1.gif"
width=100></TD>
<TD><IMG id=pic2 ondragstart=fOnDragStart(this.src) height=60 src="2.gif"
width=100></TD>
<TD><IMG id=pic3 ondragstart=fOnDragStart(this.src) height=60 src="3.gif"
width=100></TD>
<TD><IMG id=pic4 ondragstart=fOnDragStart(this.src) height=60 src="4.gif"
width=100></TD>
<TD><IMG id=pic5 ondragstart=fOnDragStart(this.src) height=60 src="5.gif"
width=100></TD>
</TR>
</TBODY>
</TABLE>
<br>
<TABLE width=100% height="160"
border=0 cellPadding=3 cellSpacing=1 bgColor=#000000>
<TBODY>
<TR bgColor=#ffffff>
<TD colspan="5" bgColor=#ffffff >表a</TD>
</TR>
<TR bgColor=#ffffff>
<TD width="20%" bgColor=#ffffff id=td1 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD width="20%" bgColor=#ffffff id=td2 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD width="20%" bgColor=#ffffff id=td3 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD width="20%"
bgColor=#ffffff id=td4 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD width="20%"
bgColor=#ffffff id=td5 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
</TR>
<TR bgColor=#ffffff>
<TD bgColor=#ffffff id=td6 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td7 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td8 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD
bgColor=#ffffff id=td9 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD
bgColor=#ffffff id=td10 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
</TR>
<TR bgColor=#ffffff>
<TD bgColor=#ffffff id=td11 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td12 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td13 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD
bgColor=#ffffff id=td14 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD
bgColor=#ffffff id=td15 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
</TR>
<TR bgColor=#ffffff height="22">
<TD bgColor=#ffffff id=td16 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td17 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td18 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td19 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td20 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
</TR>
<TR bgColor=#ffffff height="22">
<TD bgColor=#ffffff id=td21 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td22 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td23 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td24 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
<TD bgColor=#ffffff id=td25 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.backgroundColor ='#FFFFFF'"> </TD>
</TR>
</TBODY>
</TABLE>
</BODY></HTML>
1.如何重置表a(我目前想到的方法是加个刷新)
2.如何清除表a中某个单元格显示的内容? (我目前想到的方法是用一个空白的图片来覆盖)
3.我发现表a中,拖过去的图片也有拖动的鼠标效果,但没有发生实际的拖动,能否改成具有实际的拖动效果? (是移动,不是复制,表b-->表a那种叫复制)
<script language="JavaScript" type="text/JavaScript">
function resetPic(){
var i=1;
while(i<26){
eval("document.all.td"+i+".innerHTML=' '")
i++
}
}
</script>
var oElem = event.srcElement;
if( oElem == null )
return false;
while(oElem){
if( oElem.tagName.toLowerCase() == "td" )
break;
oElem = oElem.parentElement;
}
oElem.style.backgroundColor = "#FFFFFF"
idstring=window.event.dataTransfer.getData("Text");
if (idstring==null) return false;
oElem.innerHTML = "<IMG width=100 height=60 onClick=this.parentElement.innerHTML=' ' src="+idstring+">"
}把DropArticle函数修改成这样然后可以通过单击你拖入的图片来实现清除已拖入的图片
领取100分,非常感谢你的帮助,本帖我研究一下,明天结帖如果愿意回答的话,我想多问一个问题:能否保存拖动后的表格结果? 可以保存成文件或保存到数据库中.
保存的问题可以把cellIndex和绑定的图片的src信息写到一个数组里,当点一个按钮提交的时候服务器端保存绑定的信息<HTML><HEAD>
<TITLE>Pic</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
TD {
FONT-SIZE: 12px;
LINE-HEIGHT: 24px;
TEXT-ALIGN: center;
}
</STYLE>
<SCRIPT language=javascript>
<!--
var theOffsetX=0
var theOffsetY=0
function fOnDragStart(obj){
var str=obj.src
window.event.dataTransfer.effectAllowed="all";
window.event.dataTransfer.setData("Text", str);
window.event.dataTransfer.clearData("HTML");
window.event.dataTransfer.clearData("Image");
document.all.movePic.src=str
document.all.moveLayer.style.visibility="visible"
theOffsetX=event.offsetX
theOffsetY=event.offsetY
moveLayer()
}
function moveLayer(){
document.all.moveLayer.style.top=event.clientY-theOffsetY;
document.all.moveLayer.style.left=event.clientX-theOffsetX
}function DropArticle()
{
var oElem = event.srcElement;
if( oElem == null )
return false;
while(oElem)
{
if( oElem.tagName.toLowerCase() == "td" )
break;
oElem = oElem.parentElement;
}
oElem.style.border = "inset black 1px"
idstring=window.event.dataTransfer.getData("Text");
if (idstring==null) return false;
oElem.innerHTML = "<IMG width=100 height=60 onClick=this.parentElement.innerHTML=' ' src="+idstring+">"
}function OverDrag()
{
var oElem = event.srcElement;
while(oElem)
{
if( oElem.tagName.toLowerCase() == "td" )
break;
oElem = oElem.parentElement;
}
oElem.style.border = "outset red 3px"
event.returnValue = false;
if (window.event.dataTransfer.getData("Text"))
window.event.dataTransfer.dropEffect = "link";
}
//-->
</SCRIPT>
</HEAD>
<BODY ondragend="document.all.moveLayer.style.visibility='hidden'" onDrag="moveLayer()">
<div id="moveLayer" style="position:absolute; left:254px; top:11px; width:139px; height:71px; z-index:-1; visibility: hidden;">
<IMG id=movePic height=60 src="" width=100 style="filter: Alpha(Opacity=50)"> </div>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=1>
<TBODY>
<TR>
<TD colspan="5">表b</TD>
</TR>
<TR>
<TD><IMG id=pic1 ondragstart=fOnDragStart(this) height=60 src="1.jpg" width=100></TD>
<TD><IMG id=pic2 ondragstart=fOnDragStart(this) height=60 src="2.jpg" width=100></TD>
<TD><IMG id=pic3 ondragstart=fOnDragStart(this) height=60 src="3.jpg" width=100></TD>
<TD><IMG id=pic4 ondragstart=fOnDragStart(this) height=60 src="4.jpg" width=100></TD>
<TD><IMG id=pic5 ondragstart=fOnDragStart(this) height=60 src="5.jpg" width=100></TD>
</TR>
</TBODY>
</TABLE>
<br>
<TABLE width=100% height="160"
border=1 cellPadding=3 cellSpacing=1 bordercolor="#000000">
<TBODY>
<TR>
<TD colspan="5" >表a<br>
若需要取消单个拖入的图片单击欲取消的图片即可,要重置所有表格点击
<button onClick="resetPic()">重置</button></TD>
<script language="JavaScript" type="text/JavaScript">
function resetPic(){
var i=1;
while(i<26){
eval("document.all.td"+i+".innerHTML=' '")
i++
}
}
</script>
</TR>
<TR>
<TD width="20%" id=td1 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD width="20%" id=td2 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD width="20%" id=td3 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD width="20%" id=td4 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD width="20%" id=td5 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
</TR>
<TR>
<TD id=td6 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td7 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td8 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td9 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td10 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
</TR>
<TR>
<TD id=td11 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td12 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td13 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td14 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td15 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
</TR>
<TR height="22">
<TD id=td16 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td17 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td18 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td19 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td20 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
</TR>
<TR height="22">
<TD id=td21 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td22 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td23 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td24 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
<TD id=td25 ondragenter=OverDrag() ondrop=DropArticle() ondragover=OverDrag()
ondragleave="this.style.border = 'inset black 1px'"> </TD>
</TR>
</TBODY>
</TABLE>
</BODY></HTML>
先MARK一下。
var PicInfo = new Array()在function DropArticle()的最后加上一句
PicInfo[(oElem.parentElement.rowIndex-1)*5+oElem.cellIndex]=idstring把function DropArticle()中的
oElem.innerHTML = "<IMG width=100 height=60 onClick=this.parentElement.innerHTML=' ' src="+idstring+">"
改成
oElem.innerHTML = "<IMG width=100 height=60 onClick='ClearPic(this.parentElement)' src="+idstring+">"增加一个函数
function ClearPic(obj){
obj.innerHTML=' ';
PicInfo[(obj.parentElement.rowIndex-1)*5+obj.cellIndex]=''
}在页面底部加一个按钮
<button onClick="window.location='SavePage.asp?Info='+PicInfo">保存</button>
------------------------------------------------------------------------------
------------------------------------------------------------------------------然后做一个名为SavePage.asp的页面用于把数据保存到数据库先用Split函数把Request.QueryString("Info")把传来的数据分配到数组里
然后把这些数据写入数据库没有写详细代码,你自己写一下试试,要是有什么问题我们再讨论