位置保持與jQuery可拖動箱子

我一直在試圖讓一個jQuery可拖動文本框，它成功地工作，現在我試圖讓文本框記住它的最後位置的座標。我搜索了高和低。我找到了一些例子，但他們從未工作。所以，當我把文本框的頁面上的一些地方，我刷新我想這是它最後一次在該代碼中，我將提供下面你是一個地方，每次刷新它返回到位置的頁面原來的位置。誰能幫忙？位置保持與jQuery可拖動箱子

這是代碼。

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Something</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    #draggable { width: 75px; height: 50px; padding: 0.25em; } 
    </style> 
    <script> 
    $(function() { 
    $('#draggable').draggable(
    { 
     drag: function(){ 
      var offset = $(this).offset(); 
      var xPos = offset.left; 
      var yPos = offset.top; 
      $('#posX').text('x: ' + xPos); 
      $('#posY').text('y: ' + yPos); 
     } 
    }); 

    }); 
    </script> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    #test { width: 75px; height: 50px; padding: 0.25em; } 
    </style> 
    <script> 
    $(function() { 
    $("#test").draggable(); 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Test</p> 
</div> 
<div id="test" class="ui-widget-content"> 
    <p>Test</p> 
</div> 


</body> 
</html>

感謝您的幫助！

來源

2013-05-16 CHASE

你是如何刷新頁面？如果你的瀏覽器刷新（F5）也不是沒有可能節省位置的某處（會話，DB，等），因爲頁面完全重新加載 –

好吧，那麼我如何創建一個會話保存它的位置？ – CHASE

這取決於你的服務器端語言;你可以通過ajax進行通信，並設置/獲取你的元素位置，或者使用一個簡單的cookie代替;在一些我給你的例子 –

如果用瀏覽器刷新頁面（F5）是不可能的，因爲該頁面已完全重新加載，所以無需在某處保存位置（會話，數據庫，Cookie，本地存儲或其他），就可以恢復元素的位置。

例如，你可以簡單地使用jquery.cookie插件設置/獲取包含拖動div的位置一個cookie：

$('#draggable').draggable({ 
     drag: function() { 
      var cookie_value = JSON.stringify($(this).offset()); 
      $.cookie('newPosition', cookie_value, { 
       expires: 7 
      }); 
     } 
    }); 

    if ($.cookie('newPosition')) { 
     //console.log($.cookie('newPosition')) 
     $("#draggable").offset({ 
      top: JSON.parse($.cookie('newPosition')).top, 
      left: JSON.parse($.cookie('newPosition')).left 
     }) 
    }

或調用的get/set webMethods的處理位置jQuery.ajax

這裏是一個使用cookies的工作小提琴：http://jsfiddle.net/IrvinDominin/pqhQu/

來源

2013-05-16 16:27:23

這個''jquery.cookie''可以記住的位置，直到用戶重新登錄？我們是否必須將其存儲在數據庫中才能這樣做？ – AimanB

這取決於，Cookie存儲在本地計算機中，可用於保存選項和數據，但它們不是每個用戶。如果你想在本地機器上存儲數據，或者這個設置是一個真正的應用數據，你必須將它存儲在數據庫中。 –

請問我有完整的代碼嗎？我很難把它放進去。對不起這個麻煩。 – CHASE

位置保持與jQuery可拖動箱子

回答

相關問題