js拖动div并保存位置,该怎么解决
日期：2014-05-16 浏览次数：20367 次
js拖动div并保存位置
在网上找了好多例子，大多数都是固定列中拖动div，不能自己随意的拖动，然后有些能随意拖动的div又不能保存。
哪位大哥有不有现成的例子啊。发一份出来让大家分享下哇。
------解决方案--------------------
在网上找了好多例子，大多数都是固定列中拖动div，不能自己随意的拖动，然后有些能随意拖动的div又不能保存。
哪位大哥有不有现成的例子啊。发一份出来让大家分享下哇。
------解决方案--------------------
- HTML code
<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就拖不回来了。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
