简单拖拽保存

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

九木旭

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

阅读量248

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xdprintf/article/details/49558809

版权

javascript 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

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

九木旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单拖拽保存

提示.drag{ width:200px; height:200px; background:rgba(204,255,102,1); position:absolute; cursor:move; top:100px;left:20px; text-align:center; }$(function () { if(window.localStorage){
复制链接

扫一扫