利用Jquery实现页面上div的拖动及位置保存

<script src="js/jquery.js.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
$("div.containment-wrapper").draggable();
});

function setObjectInitPos(selector)
{
var cookies = getCookies();
$(selector).each(function(){
var left = parseFloat(cookies[$(this).attr("id")+"_Left"]);
var top = parseFloat(cookies[$(this).attr("id")+"_Top"]);
if(!isNaN(left))
$(this).css("left", left + "px");
if(!isNaN(top))
$(this).css("top", top + "px");
});
$(selector).draggable({
start:function(){},
drag:function(){},
stop:function(){
setCookie($(this).attr("id")+"_Left", $(this).css("left").replace("px",""),365);
setCookie($(this).attr("id")+"_Top", $(this).css("top").replace("px",""),365);
}
});
}

function setCookie(name, value, daysToLive) {
var cookie = name + "=" + encodeURIComponent(value);
if (typeof daysToLive === "number")
cookie += "; max-age=" + (daysToLive*60*60*24);
document.cookie = cookie;
}

function getCookies() {
var cookies = {};
var all = document.cookie;
if (all === "")
return cookies;
var list = all.split("; ");
for(var i = 0; i < list.length; i++) {
var cookie = list[i];
var p = cookie.indexOf("=");
var name = cookie.substring(0,p);
var value = cookie.substring(p+1);
value = decodeURIComponent(value);
cookies[name] = value;
}
return cookies;
}
</script>

<div id="div1" style="position:absolute;border:1px solid green;width:200px;height:30px;left:0px;top:0px;">
<img src="https://www.baidu.com/img/bdlogo.png" style="width:200px;height:30px;" />
</div>
<div id="div2" style="position:absolute;border:1px solid green;width:200px;height:30px;left:0px;top:40px;">
<img src="https://www.baidu.com/img/bdlogo.png" style="width:200px;height:30px;" />
</div>
<div id="div3" style="position:absolute;border:1px solid green;width:200px;height:30px;left:0px;top:80px;">
<img src="https://www.baidu.com/img/bdlogo.png" style="width:200px;height:30px;" />
</div>

<script type="text/javascript">
$(function(){
setObjectMovable(document.getElementById("div1"));
setObjectMovable(document.getElementById("div2"));
setObjectMovable(document.getElementById("div3"));

setCookie("a","1",1);
setCookie("b","2",1);
});

function setObjectMovable(obj)
{
$(obj).bind("mousedown",function(){
obj.startX = event.clientX;
obj.startY = event.clientY;
obj.drag = true;
obj.setCapture();
});
$(obj).bind("mousemove",function(){
if(obj.drag)
{
var chgX = event.clientX - obj.startX;
var chgY = event.clientY - obj.startY;
obj.startX = event.clientX;
obj.startY = event.clientY;
var newLeft = parseFloat($(obj).css("left").replace("px","")) + parseFloat(chgX);
var newTop = parseFloat($(obj).css("top").replace("px","")) + parseFloat(chgY);
$(obj).css("left", newLeft + "px");
$(obj).css("top", newTop + "px");
}
});
$(obj).bind("mouseup",function(){
obj.drag = false;
obj.releaseCapture();
});
}

function setCookie(name, value, daysToLive) {
var cookie = name + "=" + encodeURIComponent(value);
if (typeof daysToLive === "number")
cookie += "; max-age=" + (daysToLive*60*60*24);
document.cookie = cookie;
}

function getCookies() {
var cookies = {};
var all = document.cookie;
if (all === "")
return cookies;
var list = all.split("; ");
for(var i = 0; i < list.length; i++) {
var cookie = list[i];
var p = cookie.indexOf("=");
var name = cookie.substring(0,p);
var value = cookie.substring(p+1);
value = decodeURIComponent(value);
cookies[name] = value;
}
return cookies;
}
</script>