js拖动div并保存位置
在网上找了好多例子，大多数都是固定列中拖动div，不能自己随意的拖动，然后有些能随意拖动的div又不能保存。
哪位大哥有不有现成的例子啊。发一份出来让大家分享下哇。
[解决办法]
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Index</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> // 拖拽与发送实现 $(document).ready(function () { //拖拽 alert("12"); var _move = false; //移动标记 var _x, _y; var index_x, index_y; $("#drag").bind("mousedown", downIndex); //div鼠标按下事件绑定 $(document).bind("mousemove", mmove); //鼠标移动事件绑定 $(document).bind("mouseup", mup); //鼠标弹起事件绑定 function mmove(e) { if (_move) { var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置 var y = e.pageY - _y; $("#drag").css({ top: y, left: x }); //div新位置 show(x, y); } } function mup() { _move = false; } function downIndex(e) { _move = true; _x = e.pageX - parseInt($("#drag").css("left")); _y = e.pageY - parseInt($("#drag").css("top")); } function show(x, y) { document.getElementById("result").innerHTML ="x坐标为："+x+"</br>"+"y坐标为："+y+"</br>"+"(注：这是div左顶点的坐标)"; } });</script><style type="text/css"> .dragg { border: 1px solid #aeeeee; width: 400px; height: 300px; cursor: move; position: absolute; left:0; top: 0; } </style></head><body><div class="dragg" id="drag"><div id="result" style="background-color:#afffff; height:200px"></div></div> </body></html>
[解决办法]
楼上abirdtofly的代码基本没有什么问题，需要注意一点的事，在往上拖拽的过程中，需要比较一下网页的高度，进行一个判断，要不然往上一拖，div就拖不回来了。