股利 - CSS迁移问题

试想一下，我得到了6个div的顺序是：

DIV1,DIV2,DIV3, 
DIV4,DIV5,DIV6

所以..我建了一个jQuery脚本，它可以让我，移动的div一个路程。例如：我可以移动DIV2走，然后它看起来像这样：

DIV1,DIV3,DIV4    DIV2 (anywhere out) 
DIV5,DIV6

，这是我的问题。我不希望，所有的div移动一升上来，我会喜欢Ë是这样的：

DIV1, ,DIV3    DIV2 (anywhere out) 
DIV4,DIV5,DIV6

一个Div的CSS：

float:left; 
height:20px; 
width:20px; 
border:1px solid white; 
position: absolute; 

background-color:Gray; 
border: 1px solid WHite;

希望能跟大家能帮助我:(

来源

2011-08-04 eMi

帮助我，脚本是没有必要的..它只是将我点击的div从它的坐标（X，Y）移动到一个定义的位置（X，Y） – eMi

那么用另一个空格div大小相同？或者只是在其他地方复制它并用css隐藏原始文件，但将其保留在原位？或者你可以让每个div保持原位以保持这个位置。只是建议......这取决于你的需求。 – Gatekeeper

您可以使用jQuery动态设置每个.box的top和left属性：

http://jsfiddle.net/nSdpe/

$('.box').each(function() { 
    var pos = $(this).position(); 
    $(this).css({ 
     top: pos.top, 
     left: pos.left 
    }); 
}).css({ 
    position: 'absolute' 
});

来源

2011-08-04 14:33:04 thirtydot

thx 4你的答案..但是我为我的应用程序创建了1000个Div/Box ..我无法创建1000个这样的函数，在这里我手动设置了1000次顶部/左侧属性.. – eMi

您不必制作“1000个功能”，它可以处理每一个'.box'。我已经更新了我的演示更加明显，尝试点击'.box'。 – thirtydot

我点击一个.b牛并没有什么事情发生..就像上次..但是也有一个区别..在你的例子中..他定义了新的pos，永远的ISNT移动，只是传送，我的移动 – eMi

为了得到这个工作，你想我的方式认为你必须将每个盒子放在一个固定的位置。

所以每个盒子就必须有这样的：

#Box1{ 
position:absolute; 
top:0; 
left:0; 
} 

#Box2{ 
position:absolute; 
top:0; 
left:150px; 
}

另一种选择是让每个的4盒不移动的容器内。我将汇总一个快速演示。

UPDATE

下面是一个使用div容器保持位置的演示：http://jsfiddle.net/fv2WQ/

来源

2011-08-04 14:26:05

thx 4你的答案！我动态地创建这些div。所以我可以给每一个这个类（与位置：绝对），但然后，所有的div将在同一个地方..在窗口的左上角:( – eMi

请注意，我设置上面两个例子的顶部和左侧的位置，这是什么把div的位置，每个div必须有一个独特的ID –

每个div都有一个唯一的ID ..我为我的应用程序创建1000个div .. ID是数字.. div1.ID = 1等等..但我现在不能创建1000个类foreach div/box :( – eMi

我会把div放在一个可用作占位符的包装中。

.wrapper{ 
float:left; 
height:20px; 
width:20px; 
padding:0px; 
} 

.content{ 
height:20px; 
width:20px; 
border:1px solid white; 
position: absolute; 
background-color:Gray; 
}

，然后只需将内容在包装

<div class="wrapper"> 
    <div class="content"> 
    </div> 
</div>

但是，是的，没有更多的代码，这是很难说会有什么工作，什么也不会。

来源

2011-08-04 14:33:32

股利 - CSS迁移问题

回答

相关问题