当我点击某个方块时候，就把那个方块从流中拖出来显示

这个问题好玩.我想到的是两种方法.方法1: 在每个有onclick=P(this)的div外面多包一层div,用于固定框架.
方法2: 如果点击第N个div(如:CLICK9),就让第N+1(如:CLICK10)个div的marginLeft加上第N个div的长(宽度).希望这两个方法是你想要的.

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

不能用absolute 的，替换成这样obj.style.position = "relative";
不过后面的位置计算也要同样使用相对位置特别处理一下
咋突然大方起来了，居然给了 10 分，哈提前祝楼主节日快乐！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="Gao YiXiang" />
    <meta name="email" content="[email protected]" />
    <meta name="keywords" content="javascript dhtml dom" />
    <meta name="description" content="I love web development." />
    <style>
.my {
    margin:8px;
    float:left;
    width:100;
    height:100;
    border:1px green solid;
}
    </style>
</head>
<body><script>
// 我想实现的效果。
// 当我点击某个方块时候，就把那个方块从流中拖出来显示，也就是position:absolute，而且是在他原来的位置显示。
// 虽然拖出来的方块显示的位置正确，但现在的问题是：一旦点击某个方块被拖出来后，后面的方块就会挤上来，如何让没有点击的方块保持原来位置不变？function p(obj)
{
    var objCopy = obj.cloneNode(true);    with (objCopy.style)
    {
        position = "absolute";
        // 注意 offsetLeft 和 offsetTop 为 IE 扩展属性，FF 无效！
        posLeft = obj.offsetLeft - 8;
        posTop = obj.offsetTop - 8;
    }
    obj.style.visibility = "hidden";    obj.parentNode.appendChild(objCopy);
}</script>
<div onclick="p(this)" class="my"> CLICK1 </div>
<div onclick="p(this)"  class="my"> CLICK2 </div>
<div onclick="p(this)" class="my"> CLICK3 </div>
<div onclick="p(this)" class="my"> CLICK4 </div>
<div onclick="p(this)" class="my"> CLICK5 </div>
<div onclick="p(this)" class="my"> CLICK6 </div>
<div onclick="p(this)" class="my"> CLICK7 </div>
<div onclick="p(this)" class="my"> CLICK8 </div>
<div onclick="p(this)" class="my"> CLICK9 </div>
<div onclick="p(this)" class="my"> CLICK10 </div>
<div onclick="p(this)" class="my"> CLICK11 </div>
<div onclick="p(this)" class="my"> CLICK12 </div>
<div onclick="p(this)" class="my"> CLICK13 </div>
<div onclick="p(this)" class="my"> CLICK14 </div>
<div onclick="p(this)" class="my"> CLICK15 </div>
<div onclick="p(this)" class="my"> CLICK16 </div>
<div onclick="p(this)" class="my"> CLICK17 </div>
<div onclick="p(this)" class="my"> CLICK18 </div></body>
</html>
下面是我对之前说的第一种方法的写法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Show Div Demo</title>
<style>
.my
{
margin:8px;
float:left;
width:101px;
height:101px;
border:1px #CCCCCC solid;

/*本人美观处理*/
background-color:#CCCCCC;
}.my_inline
{
float:left;
width:100px;
height:100px;
border:1px green solid;

/*本人美观处理*/
background-color:#FFFFFF;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head><body>
<script>
var g_obj=null; //用于保存哪个上层div被点击选中
function p(obj)
{
if(obj.style.position=="absolute")
{
obj.style.position=''; //去除浮动
g_obj=null; //清除选中
return;
}

if(g_obj)
g_obj.style.position=''; //清除之前选中 var obj2=obj.parentElement; //得到下层div对象
var left=obj2.offsetLeft;
var top=obj2.offsetTop;
obj.style.position="absolute";
//obj.style.posLeft=left-8;
//obj.style.posTop=top-8;
obj.style.posLeft=left-1; //改成2个像素美观一点
obj.style.posTop=top-1;

g_obj=obj; //将选中的对象保存
}
</script>
<div class="my">
<div onclick="p(this)" class="my_inline">CLICK1</div>
</div>
<div class="my">
<div onclick="p(this)" class="my_inline">CLICK2</div>
</div>
<div class="my">
<div onclick="p(this)" class="my_inline">CLICK3</div>
</div>
<div class="my">
<div onclick="p(this)" class="my_inline">CLICK4</div>
</div>
<div class="my">
<div onclick="p(this)" class="my_inline">CLICK5</div>
</div>
</body>
</html>
wei_new
微微灯火
------------------------------------------------你的第一个方法我试验了，如果设置很多方块的话，每行的最后一个方块点击后，整个排版就变型了，怎么解决啊？？
再加入一个框架div来固定大小就行了.一会儿写个例子给你.
我想得太复杂了,其实是长度问题.
对于我上面的代码,你改一个地方就不会象你说的那样了..my
{
    margin:8px;
    float:left;
    width:102px; /*这里原来是101px*/
    height:102px; /*这里原来是101px*/
    border:1px #CCCCCC solid;

    /*本人美观处理*/
    background-color:#CCCCCC;
}