利用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>

 

转载于:https://www.cnblogs.com/nanfei/p/4885929.html