拖拽框

最新推荐文章于 2023-06-07 11:27:10 发布

qwe5566800

最新推荐文章于 2023-06-07 11:27:10 发布

阅读量212

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qwe5566800/article/details/68948304

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title> 综合案例 </title>
<style>
#container{ position: absolute ; display: none ; width: 400 px ; height: 300 px ; border: 1 px solid #ccc ; border-radius: 10 px ;}
#sp{ padding-right: 10 px ; color: red ; border-radius: 10 px 10 px 0 0 ; width: 390 px ; height: 50 px ; background: #1883ba ; font-size: 30 px ; line-height: 50 px ; text-align: right ;}
#box{ width: 400 px ; height: 450 px ;}
#count{ width: 300 px ; height: 40 px ; line-height: 40 px ; font-size: 28 px ; margin: 20 px auto ;}
#pwd{ width: 300 px ; height: 40 px ; line-height: 40 px ; font-size: 28 px ;}
</style>
</head>
<body>
<button id= "login" > 点击开始注册 </button>
<div id= "container" >
<div id= "sp" ><span id= "ssp" >[ X ] </span></div>
<div id= "box" >
账号： <input type= "text" id= "count" ><br/>
密码： <input type= "password" id= "pwd" >
</div>
</div>
<script>
var _log = document. getElementById( "login") ;
var cont = document. getElementById( "container") ;

_log. onclick = function(){
cont. style. display = "block" ;
var _c = document. cookie ;
//console.log(_c);
var _a = _c. split( ";") ;
console. log(_a) ;
var _x = _a[ 0]. trim(). substring( "postx=". length) ;
var _y = _a[ 1]. trim(). substring( "posty=". length) ;
console. log(_x) ;
console. log(_y) ;
var jsonx = JSON. parse(_x) ;
var jsony = JSON. parse(_y) ;
console. log(jsonx. x) ;
console. log(jsony) ;
cont. style. left = jsonx. x + "px" ;
cont. style. top = jsony. y + "px" ;

//console.log(_x);
}
ssp. onclick = function(){
cont. style. display = "none" ;
}
sp. onmousedown = function(e){
e = e || window. event ;
var _ox = e. offsetX ;
var _oy = e. offsetY ;
document. onmousemove = function(e){
e = e || window. event ;
var _cx = e. clientX ;
var _cy = e. clientY ;
var _left = _cx - _ox ;
var _top = _cy - _oy ;
if(_left < 0){_left = 0}
if(_top < 0){_top = 0}
if(_left + cont. offsetWidth> document. documentElement. clientWidth ){
_left = document. documentElement. clientWidth - cont. offsetWidth ;
}
cont. style. left = _left + "px" ;
cont. style. top = _top + "px" ;

px = '{"x":'+_left+ "}" ;
py = '{"y":'+_top+ "}" ;
var date = new Date() ;
date. setDate(date. getDate() + 3) ;
document. cookie = "postx="+ px + ";expires=" +date.toGMTString() ;
document. cookie = "posty="+ py + ";expires=" +date.toGMTString() ;
}
}
sp. onmouseup = function () {
document. onmousemove = null ;
}

</script>
</body>
</html>