可用分押宝游戏火热进行中...	专题改版：Java Web 专题

不知道是否很难的问题

楼主cxczj（飞雪连天.笑）2004-08-02 22:19:26 在 Web 开发 / JavaScript 提问

我需要做一个网页,实现这样的功能

网页布局:
网页由两个表格组成:
一个表格是空的,假设名为表a,规格是 5行5列

另一个表格是用图片填充的(根据图片的多少决定表格的大小,类似于相册类网站的缩略图),假设名为表b

要实现的功能:
从表b中,拖动图片到表a的某个单元格,就在此单元格中显示拖过来的图片,表b中被拖动的图片不清除

或者是其他方法实现这样的效果

不知道我说得是否清楚问题点数：100、回复次数：17Top

1 楼weige250（桂电weige）回复于 2004-08-02 22:28:39 得分 0

相当于编辑框？Top

2 楼cc0cc（大学,你玩我呀）回复于 2004-08-02 22:38:25 得分 0

ASP没这么强吧,多半是XML和JS的能力了Top

3 楼cxczj（飞雪连天.笑）回复于 2004-08-02 22:48:36 得分 0

能实现就行,asp/jsp都可以Top

4 楼duoduobaba（避雷针）回复于 2004-08-03 00:43:07 得分 0

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

5 楼cxczj（飞雪连天.笑）回复于 2004-08-03 08:57:49 得分 0

感谢楼上,成功后结帖Top

6 楼cxczj（飞雪连天.笑）回复于 2004-08-03 09:11:47 得分 0

非常感谢楼上,你的代码完全实现了我要的要求.

我还想问问:
1.如何重置表a(我目前想到的方法是加个刷新)
2.如何清除表a中某个单元格显示的内容? (我目前想到的方法是用一个空白的图片来覆盖)
3.我发现表a中,拖过去的图片也有拖动的鼠标效果,但没有发生实际的拖动,能否改成具有实际的拖动效果? (是移动,不是复制,表b-->表a那种叫复制)Top

7 楼cxczj（飞雪连天.笑）回复于 2004-08-03 09:12:49 得分 0

如果能解决上述问题,我再开100分的帖给你Top

8 楼eagleyes125（Allen）回复于 2004-08-03 09:14:31 得分 0

不错,这个效果实现的很好.UP一下.Top

9 楼duoduobaba（避雷针）回复于 2004-08-03 15:54:01 得分 0

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

10 楼duoduobaba（避雷针）回复于 2004-08-03 16:07:51 得分 0

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函数修改成这样然后可以通过单击你拖入的图片来实现清除已拖入的图片Top

11 楼cxczj（飞雪连天.笑）回复于 2004-08-03 21:20:24 得分 0

谢谢 duoduobaba(避雷针)

请先到 http://community.csdn.net/Expert/topic/3239/3239619.xml?temp=.2788965
领取100分,非常感谢你的帮助,本帖我研究一下,明天结帖

如果愿意回答的话,我想多问一个问题:

能否保存拖动后的表格结果? 可以保存成文件或保存到数据库中.Top

12 楼duoduobaba（避雷针）回复于 2004-08-04 10:12:38 得分 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>
Top

13 楼DARKNESSFALL（DARKNESSFALL）回复于 2004-08-04 11:36:33 得分 0

我觉得可以实现。
先MARK一下。Top

14 楼cxczj（飞雪连天.笑）回复于 2004-08-04 13:55:35 得分 0

保存的问题可以把cellIndex和绑定的图片的src信息写到一个数组里,当点一个按钮提交的时候服务器端保存绑定的信息

但我不会写jsp,asp又做不了.

能把这个也写出来吗? 如果麻烦的话就算了.

本帖今晚结Top

15 楼hbzyduwu（^-^鞋带又松了~-~）回复于 2004-08-04 15:17:23 得分 0

upTop

16 楼duoduobaba（避雷针）回复于 2004-08-04 15:18:52 得分 0

先定义全局数组
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")把传来的数据分配到数组里
然后把这些数据写入数据库

没有写详细代码,你自己写一下试试,要是有什么问题我们再讨论Top

17 楼cxczj（飞雪连天.笑）回复于 2004-08-04 21:09:22 得分 0

有这个就行了,这自己再研究一下,不行再发帖请教你.

先结帖Top