基於jquery的可拖動div
<html class=''>
<head>
<title>基於jquery的可拖動div</title>
<style>
.noselect
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html
{
width: 100%;
height: 100%;
}
body
{
background: radial-gradient(#ACBEC8, #3A4E57);
margin: 0;
width: 100%;
height: 100%;
font-family: 'Raleway' , sans-serif;
}
.testtext
{
width: 100%;
color: white;
text-align: center;
display: inline-block;
padding-top: 30vh;
font-size: 48px;
text-shadow: 0 0 6px #333;
}
.text
{
width: 100%;
color: white;
text-align: center;
display: inline-block;
padding: 40px 0;
font-size: 48px;
line-height: 30px;
}
.text a
{
text-decoration: none;
font-size: 15px;
line-height: 20px;
color: white;
}
.window
{
width: 500px;
height: 300px;
background: #181818;
margin-left: -250px;
left: 50%;
position: absolute;
}
.pew
{
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
color: #111;
background: #E31836;
cursor: default;
}
.container
{
width: 100%;
height: calc(100% - 30px);
color: #eee;
padding: 35px 0 0 0;
text-align: center;
font-size: 36px;
}
</style>
</head>
<body>
<script src="/scripts/2bc/_gg_970_90.js" type="text/javascript"></script>
<span class="text noselect">DRAGGIN' WINDOWS<br />
<a href="http://www.w2bc.com">This is an old one. Click HERE for access the newer one.</a></span>
<div class="window noselect">
<div class="pew">
Header
</div>
<div class="container">
The Cords
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
var clicked = "Nope.";
var mausx = "0";
var mausy = "0";
var winx = "0";
var winy = "0";
var difx = mausx - winx;
var dify = mausy - winy;
$("html").mousemove(function (event) {
mausx = event.pageX;
mausy = event.pageY;
winx = $(".window").offset().left;
winy = $(".window").offset().top;
if (clicked == "Nope.") {
difx = mausx - winx;
dify = mausy - winy;
}
var newx = event.pageX - difx - $(".window").css("marginLeft").replace('px', '');
var newy = event.pageY - dify - $(".window").css("marginTop").replace('px', '');
$(".window").css({ top: newy, left: newx });
$(".container").html("Mouse Cords: " + mausx + " , " + mausy + "<br />" + "Window Cords:" + winx + " , " + winy + "<br />Draggin'?: " + clicked + "<br />Difference: " + difx + " , " + dify + "");
});
$(".pew").mousedown(function (event) {
clicked = "Yeah.";
});
$("html").mouseup(function (event) {
clicked = "Nope.";
});
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章