在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的位置

回答

相关问题