股利 - 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遷移問題

回答

相關問題