jquery在重新加載站點後恢復draggables位置

我試圖將一個div從一個容器拖到anonther並將它們放在那裏。這是有效的。問題是，當我嘗試保存並重新加載職位。可拖動&投擲的DIV應該從#dragdelete DIV拖動到#tagDropPoint DIVjquery在重新加載站點後恢復draggables位置

$('.resizeDiv') 
    .draggable({ revert: "invalid", snap: "#dragDelete", snapMode: "inner", containment: "#draggableArea" }); 

$('#tagDropPoint').droppable({accept: '.resizeDiv', 
    drop: function(event, ui) { 
     setActive(lastXmlTag); 
     ui.draggable.resizable(); 
     } 
});

這是我得到的位置

$('.resizeDiv').mouseup(
    function(){ 
     var position = $(this).position(); 
     var dropAreaPos = $('#tagDropPoint').position(); 

     var xpos = position.left - dropAreaPos.left; 
     var ypos = position.top - dropAreaPos.top; 

     var width = $(this).width(); 
     var height = $(this).height(); 

     var thisId = $(this).attr("id"); 
     lastXmlTag = thisId; 
     updateDDXMLAttr(xpos, ypos, width, height, thisId); 

    } 
);

HTML的阻力：拖動標籤這裏。

 <div class="ddSpacer">&nbsp;</div> 

     <div id="dragDelete" class="dragDelete" style="height: {$this->heightListBox}px;"> 
      <p class="dynConTagHeading">XML-Tags</p> 
      <div id="dynConTagsContainer"> 

      </div> 
     </div> 
      <p style="clear: both">&nbsp;</div> 
     </div>

的位置和大小的值存儲在一個隱藏字段，並刷新該網站後重新加載。 draggableArea div顯示在jquery對話框中。但重新加載時位置不一樣。它如何被修復。

來源

2012-12-15 Livingstone

請爲此創建一個JSFIDDLE：http://jsfiddle.net/。 – Amber

現在我創建了一個jsfiddle [鏈接]（http://jsfiddle.net/DSU72/3/）但沒有重新加載。我希望我能在jsfiddle中解釋沒有完整功能的問題。你可以看到有一個可拖動的div，你可以拖到灰色區域。在重新加載頁面上，我得到的值xpos = position.left - dropAreaPos.left; ypos = position.top - dropAreaPos.top;從POST（在jsf中，現在沒有這樣的隱藏字段我使用）我的問題是：當我把x pos和ypos通過$（'。resizeDiv'）.css（）回到div的位置是不一樣的和以前一樣 – Livingstone

我正在檢查你的代碼。 – Amber

由於填充，邊距，絕對位置，位置可能已經移動，並且可能是由於某些編碼錯誤。

如果你可以創建一個JSFiddle爲相同的那麼它會更容易調試和幫助你。

來源

2012-12-15 10:20:30 Amber

好吧創建一個吧 – Livingstone

使用cookie來存儲位置或像php或ASP.NET這樣的服務器化頁面呈現技術，以便在正確的位置提供包含Div的頁面。

頁面div處於原始位置是正確的HTML行爲，沒有什麼可以「修復」這種行爲，這是它的工作原理。如果您希望它的行爲不同，請使用cookie或以不同的方式呈現頁面。

來源

2012-12-15 10:06:50 Stefan

存儲倉位不是問題。獲得這些值也沒有問題。我唯一的問題是，我從$（'＃tagDropPoint'）。position（）獲得的職位與通過css「重新設置」div不一樣。 – Livingstone

@Livingstone可能有很多原因，如填充，邊距，絕對位置，這可能會導致你不適應。 – Amber

噢好吧，我用絕對位置爲可拖動div的周圍div和相對位置。生病檢查 – Livingstone

Javascript（包括jquery）只是瀏覽器操作。要保存，您需要將設置保存到數據庫或文件。

來源

2012-12-15 10:07:02 bobthyasian

也許我沒有解釋我確切的問題。我從POST獲取值（xpos，ypos ...）。並將這些值加載到每個div css也可以。我的問題是，職位不完全相同。他們被輕輕移動 – Livingstone

感動？請詳細說明（附帶一些代碼）。 – bobthyasian

divs的位置與重新加載之前不一樣。 – Livingstone

jquery在重新加載站點後恢復draggables位置

回答

相關問題