不知道是否很难的问题

<!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>

</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")把传来的数据分配到数组里
然后把这些数据写入数据库没有写详细代码,你自己写一下试试,要是有什么问题我们再讨论

调试易

不知道是否很难的问题

解决方案 »