利用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>
桂棹兮兰桨,击空明兮溯流光。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战