在CSS3中存儲可排序框的位置？

如何將盒子的位置存儲在可排序的排液中？例如，每次用戶將一個框從category 1拖動到category 2，那麼當他刷新頁面時，它會記住該位置？在CSS3中存儲可排序框的位置？

這裏有一個你可能想看看界面的HTML代碼：

<div class="row-fluid sortable"> 
     <div class="box span3"> 
      <div class="box-header well"> 
       <h2>Category1</h2> 
      </div> 
     </div> 

     <div class="box span3"> 
      <div class="box-header well"> 
       <h2>Category2</h2> 
      </div> 
     </div> 
    </div>

正如你所看到的，它使用CSS文件中的類的樣式。或者是否有更好的方法來使用jQuery來做到這一點？

來源

2013-05-16 AimanB

沒有辦法在客戶端代碼中保存元素的位置。 – Ligth

-1

喬治指出，您需要某種持久性存儲，您可以使用cookie或數據庫來做到這一點。

下面是一個示例的鏈接，該示例使用jquery在拖動完成後序列化訂單，然後通過ajax將結果傳遞給服務器端腳本。服務器端腳本會更新數據庫，併爲您提供持續訂單的方法。

我強調這個例子是幾年前我自己的例子之一。這是一個我不再維護的網站，但是這篇文章有很多評論強調了可能出現的一些問題。

該示例使用列表而不是divs。它也使用數據庫來存儲持久性數據，但您可以更改服務器端腳本以保存cookie。

http://www.wiseguysonly.com/2008/12/07/drag-and-drop-reordering-of-database-fields-sortables-with-jquery/

它應該是足夠簡單，以適應您的需求。

來源

2013-05-16 16:42:39 timstermatic

請考慮更新您的問題以包含必要的代碼和/或想法。只有鏈接的答案沒有用：答案應該是獨立的，只使用鏈接作爲參考。 –

這篇文章有很多代碼，它有許多上下文用戶提供的評論，這就是爲什麼我沒有在這裏發佈一切。 – timstermatic

我明白，鏈接末尾的數據可能會提供良好的上下文，但是您應該考慮添加足夠的問題以使其即使在鏈接崩潰時仍然有用。這可能只是想法，可以讓用戶製作出一個好的Google查詢，或者它可以是一個完整的代碼示例。 –

有存儲數據

使用客戶端cookie來存儲數據至少在兩個方面。您可以使用像jquery-cookie to read and write cookies on the client side這樣的插件。
將數據存儲在服務器端。這將需要對後端腳本的AJAX調用來存儲數據。然後，您可以查詢數據庫中每個新頁面加載的存儲位置，或者創建一個新的AJAX調用以根據需要檢索數據。

來源

2013-05-16 16:43:51

感謝您的意見。但是一旦超時到達，cookie就會過期，對嗎？我的意思是，它會永遠記住cookie，當用戶重新登錄時，它會使用最後一個位置？使用數據庫也許 – AimanB

@amnbhrm Cookie將過期，但可以設置爲[Very Long Time™]（http://stackoverflow.com/questions/3290424/set-a-cookie-to-never-expire#3290474）。數據庫方法將允許永久存儲。 –

在CSS3中存儲可排序框的位置？

回答

相關問題