javascript编程语言怎么实现拖动div并且保存div的布局

javascript编程语言怎么实现拖动div并且保存div的布局,老板说不做完不给吃午饭,急得都要尿裤子了,谁解决了马上给c币。

拖动并且保存位置

代码

<!DOCTYPE html>



Title

var startx; var starty; var startLeft; var startTop; var titleDiv=document.getElementById("title"); var mainDiv=document.getElementById("main"); var isDown=false; // 鼠标按下 function movedown(e){ e=e?e:window.event; isDown=true; startx=e.clientX; starty=e.clientY; startLeft=parseInt(mainDiv.style.left); startTop=parseInt(mainDiv.style.top); } // 鼠标移动 function move(e){ e=e?e:window.event; if(isDown) { mainDiv.style.left = e.clientX - (startx - startLeft)+"px"; mainDiv.style.top = e.clientY - (starty - startTop)+"px"; } } // 鼠标松开 function moveup(){ isDown=false; } titleDiv.onmousedown=movedown; titleDiv.onmousemove=move; titleDiv.onmouseup=moveup;


优化(封装,以及解决拖动问题(事件捕获))

<!DOCTYPE html>



Title

function Mover(title) { this.obj = title; this.startx = 0; this.starty; this.startLeft; this.startTop; this.mainDiv = title.parentNode; var that = this; this.isDown = false; this.movedown = function (e) { e = e ? e : window.event; if (!window.captureEvents) { this.setCapture(); } //事件捕获仅支持ie // 函数功能:该函数在属于当前线程的指定窗口里设置鼠标捕获。一旦窗口捕获了鼠标, // 所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。 // 如果鼠标光标在另一个线程创建的窗口上,只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。 // 非ie浏览器 需要在document上设置事件 that.isDown = true; that.startx = e.clientX; that.starty = e.clientY; that.startLeft = parseInt(that.mainDiv.style.left); that.startTop = parseInt(that.mainDiv.style.top); } this.move = function (e) { e = e ? e : window.event; if (that.isDown) { that.mainDiv.style.left = e.clientX - (that.startx - that.startLeft) + "px"; that.mainDiv.style.top = e.clientY - (that.starty - that.startTop) + "px"; } } this.moveup = function () { that.isDown = false; if (!window.captureEvents) { this.releaseCapture(); } //事件捕获仅支持ie } this.obj.onmousedown = this.movedown; this.obj.onmousemove = this.move; this.obj.onmouseup = this.moveup; //非ie浏览器 document.addEventListener("mousemove", this.move, true); } var mover = new Mover(document.getElementById("title")); //写两个是为了解决 ie 和非ie 浏览器关于事件捕获 的兼容性问题


你需要将div的布局的css数据存起来,下次自动加载,至于div的拖动,就一个鼠标移动事件,百度上边一大堆。