简单拖拽保存

最新推荐文章于 2021-06-09 23:35:31 发布

原创最新推荐文章于 2021-06-09 23:35:31 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

63 篇文章

订阅专栏

本文介绍了一种利用jQuery库实现网页元素拖拽功能的方法。通过监听鼠标事件，结合HTML5本地存储功能，实现了元素的位置调整，并保持了位置信息在页面刷新后的持久化。

<html>
<head>
<title>提示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.drag{
	width:200px;
	height:200px;
	background:rgba(204,255,102,1);
	position:absolute;
	cursor:move;
	top:100px;left:20px;
	text-align:center;
	}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>


$(function () {
	if(window.localStorage){
 $(".drag").css({top:localStorage.getItem("top"),left:localStorage.getItem("left") }); 
 }
 
    var _move = false; //移动标记 
    var _x, _y; //鼠标离控件左上角的相对位置 
    $(".drag").click(function () {
		
       // alert("click");
		//点击（松开后触发）  
    }).mousedown(function (e) {
		//alert("111");
		//alert(_move);
        _move = true;
        _x = e.pageX - parseInt($(".drag").css("left"));
        _y = e.pageY - parseInt($(".drag").css("top"));
        $(".drag").fadeTo(20, 0.5); //点击后开始拖动并透明显示   
    });
    $(document).mousemove(function (e) {
		
		        if (_move) {
            var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置 
            var y = e.pageY - _y;
            $(".drag").css({
                top: y,
                left: x
            }); //控件新位置   
			window.localStorage.setItem("top",y);
			window.localStorage.setItem("left",x);
        }
    }).mouseup(function () {
        _move = false;
        $(".drag").fadeTo("fast", 1); //松开鼠标后停止移动并恢复成不透明
    });
});
</script>
</head>
<body >
<div class="drag">O(∩_∩)O哈哈~</div>
</body>
</html>