帮助！ jQuery可拖动的保存位置问题 [英] help! jquery draggable save position problem
本文介绍了帮助！ jQuery可拖动的保存位置问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建2个可拖动的框，但是它无法正常工作，因为它无法从上一次拖动中恢复位置.
这是我的愚蠢代码.
I ''m trying to create 2 draggable boxs but it is not work because it can not restore the position from the last dragging.
Here are my stupid codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Draggable</title>
<link rel="stylesheet" href="sources/jquery.ui.all.css">
<script src="sources/jquery-1.7.2.js"></script>
<script src="sources/jquery.ui.core.js"></script>
<script src="sources/jquery.ui.widget.js"></script>
<script src="sources/jquery.ui.mouse.js"></script>
<script src="sources/jquery.ui.draggable.js"></script>
<script src="sources/jquery.cookie.js"></script>
<link rel="stylesheet" href="sources/demos.css">
<style>
#draggable1 {top:70px; left:77px; width: 100px; height: 100px; padding: 0.5em; background-color:#E3E4FA;}
#draggable2 {top:170px; left:77px; width: 100px; height: 100px; padding: 0.5em; background-color:#E9CFEC;}
</style>
<script>
$(document).ready(function () {
$(function() {
var d1 = $.cookie('positionD1');
var d2 = $.cookie('positionD2');
if (d1 && d2) {
//alert(d1[0]);
var savedPosition1 = $.cookie('positionD1').split(',');
$("#draggable1").css({ top: savedPosition1[0], left: savedPosition1[1] });
var savedPosition2 = $.cookie('positionD2').split(',');
$("#draggable2").css({ top: savedPosition2[0], left: savedPosition2[1] });
}
$("#draggable1").draggable({
stop: function(event, ui) {
var currentPos1 = $("#draggable1").position();
$.cookie('positionD1', currentPos1.top + ',' + currentPos1.left);
//alert($.cookie('positionD1'));
// $("#d1").innertext = $.cookie('positionD1');
}
});
$("#draggable2").draggable({
stop: function(event, ui) {
var currentPos2 = $("#draggable2").position();
$.cookie('positionD2', currentPos2.top + ',' + currentPos2.left);
//alert($.cookie('positionD2'));
// $("#d2").innertext = $.cookie('positionD2');
}
});
$("draggable1").each(function() {
var savedPosition1 = $.cookie('positionD1').split(',');
$(this).css({ top: savedPosition1(0), left: savedPosition1(1) });
});
$("draggable2").each(function() {
var savedPosition2 = $.cookie('positionD2').split(',');
$(this).css({ top: savedPosition2(0), left: savedPosition2(1) });
});
});
});
/*$(function() {
$("draggable1").each(function() {
var savedPosition1 = $.cookie('positionD1').split(',');
$(this).css({ top: savedPosition1(0), left: savedPosition1(1) });
});
$("draggable2").each(function() {
var savedPosition2 = $.cookie('positionD2').split(',');
$(this).css({ top: savedPosition2(0), left: savedPosition2(1) });
});
});*/
</script>
</head>
<body>
<div class="demo">
<div id="draggable1" class="ui-widget-content">
<p>100x100</p>
<p id="d1"></p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>100x100</p>
<p id="d2"></p>
</div>
</div>
</body>
</html>
谢谢您的帮助.
Thank you for help.
推荐答案
(文档).ready(
(document).ready(function () {
( var d1 =
(function() { var d1 =
.cookie(' positionD1')； var d2 =
.cookie('positionD1'); var d2 =
这篇关于帮助！ jQuery可拖动的保存位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
