在jquery中保存一個可拖動div的位置

我在jsp中有一些可拖動的div，我可以在頁面上拖動所有東西。拖動後有一個保存按鈕，點擊我想要保存網格的位置餅乾或數據庫取液better.Please建議我該怎麼辦that.Below是我拖動代碼在jquery中保存一個可拖動div的位置

<div id="drag"> 
    <div> 
     <div> 
      <div> 
       This div is draggable 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#drag').draggable(); 
    }) 
</script>

來源

2015-02-24 micheal

閱讀[文檔]（http://api.jqueryui.com/draggable/#event-stop）兄弟 – deostroll 2015-02-24 05:57:46

@micheal你想要頂部和左側的位置？ – 2015-02-24 06:01:46

你可以嘗試localstorage – wrick17 2015-02-24 06:05:33

基本上你想拍攝X/Y座標，並保存它們。這可以是本地存儲，設置cookie，將其發送到API，這沒關係。但這是你如何獲得信息。

<div id="drag"> 
    <div> 
     <div> 
      <div> 
       <p>This div is draggable</p> 
       <button id="saveMe">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    if (local.get('divOffset')) { 
     //check if local storage already has your offset. and set it 
     $('#drag').css(local.get('divOffset')) 
    } 

    $('#drag').draggable(); 

    $('#drag').on('click', '#saveMe', function() { 
     // we're listening for a click event on the saveMe button 
     var $drag = $('#drag'), 
     //assigning the #drag div jQ obj to a variable 
      offset = $drag.offset(); 
     // grabbing the offset: Object {top: 157.5, left: 150} 
     local.set('divOffset', offset); 
     //save the offset(local storage) 
    }); 

}); 

function Local() { 
    return { 
     set : function (key, obj) { 
      localStorage.setItem(key, JSON.stringify(obj)); 
      return obj; 
     }, 
     get : function (key) { 
      var obj = {}; 
      if (localStorage.getItem(key) !== 'undefined') { 
       obj = JSON.parse(localStorage.getItem(key)); 
      } 
      return obj; 
     }, 
     clear : function() { 
      localStorage.clear(); 
      return this; 
     }, 
     remove : function (key) { 
      localStorage.removeItem(key); 
      return this; 
     } 
    }; 
} 
var local = Local(); 

</script>

的良好通過API服務將其保存到數據庫是，用戶可以從計算機到計算機及其信息將保持不變。本地存儲將只保留在一臺機器上。爲了舉一個例子，我已經包含了本地存儲，因爲保存到一個API涉及更多。

這是我很久以前寫的本地存儲獲取/設置函數。

來源

2015-02-24 06:06:17

k.thanks人的幫助。我會看到api的東西現在fr插入數據庫 – micheal 2015-02-24 07:01:47

@micheal，你的服務器端編碼的經驗是什麼？我並不是說你不能這樣做，但它不是像這樣的單步過程。你需要一個服務器來處理用戶（節點），一個數據庫來存儲所有的東西（mongo），然後是一個有端點接收和發送你的div偏移量的寧靜服務。這是可行的，並且有很多教程可以幫助你，但這並不容易。 – 2015-02-24 07:05:39

以及我以爲是從本地存儲獲取值我可以將它們直接插入數據庫點擊保存。因爲我希望它被插入點擊保存按鈕。所以這種方法很好嗎？ – micheal 2015-02-24 07:20:27

在這裏，你有你可以使用jQuery的cookie的插件：

https://github.com/carhartl/jquery-cookie

這是與jQuery和PHP存儲在數據庫中的例子。

http://code.tutsplus.com/tutorials/simple-draggable-element-persistence-with-jquery--net-7474

在這裏，你必須與jQuery插件存儲餅乾的工作示例。

jQuery.cookie = function (key, value, options) { 
 

 
    // key and at least value given, set cookie... 
 
    if (arguments.length > 1 && String(value) !== "[object Object]") { 
 
     options = jQuery.extend({}, options); 
 

 
     if (value === null || value === undefined) { 
 
      options.expires = -1; 
 
     } 
 

 
     if (typeof options.expires === 'number') { 
 
      var days = options.expires, t = options.expires = new Date(); 
 
      t.setDate(t.getDate() + days); 
 
     } 
 

 
     value = String(value); 
 

 
     return (document.cookie = [ 
 
      encodeURIComponent(key), '=', 
 
      options.raw ? value : encodeURIComponent(value), 
 
      options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 
 
      options.path ? '; path=' + options.path : '', 
 
      options.domain ? '; domain=' + options.domain : '', 
 
      options.secure ? '; secure' : '' 
 
     ].join('')); 
 
    } 
 

 
    // key and possibly options given, get cookie... 
 
    options = value || {}; 
 
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; 
 
    return (result = new RegExp('(?:^|;)' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; 
 
}; 
 

 
//------------------------------------------------END of plugin!--------------------------------- 
 
$('div:first').draggable({ 
 
    stop: function(event, ui) { 
 
     $.cookie('div1x', $(this).css('left')); 
 
     $.cookie('div1y', $(this).css('top')); 
 
     } 
 
}); 
 
$('div:last').draggable({ 
 
    stop: function(event, ui) { 
 
     $.cookie('div2x', $(this).css('left')); 
 
     $.cookie('div2y', $(this).css('top')); 
 
     } 
 
}); 
 
if($.cookie('div1x') != null){ 
 
    $('div:first').css('left', $.cookie('div1x')); 
 
}else{ 
 
    $('div:first').css('left', '50px'); 
 
} 
 
if($.cookie('div1y') != null){ 
 
    $('div:first').css('top', $.cookie('div1y')); 
 
}else{ 
 
    $('div:first').css('top', '100px'); 
 
} 
 
if($.cookie('div2x') != null){ 
 
    $('div:last').css('left', $.cookie('div2x')); 
 
}else{ 
 
    $('div:last').css('left', '150px'); 
 
} 
 
if($.cookie('div2y') != null){ 
 
    $('div:last').css('top', $.cookie('div2y')); 
 
}else{ 
 
    $('div:last').css('top', '250px'); 
 
}

div 
 
{ 
 
    width:100px; 
 
    height:100px; 
 
    background-color:cyan; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
 

 
<div></div><div></div>

來源

2015-02-24 06:14:28 dbd

在jquery中保存一個可拖動div的位置

回答

相關問題