Windows Desktop Select
It's the Windows Select :)
It's the Windows Select :)
<h1>Drag Anywere</h1>
<h1>Drag Anywere</h1>
<div id="drag"></div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
* {
* {cursor: default;
}
body {background-image: url("http://wallpapers.wallbase.cc/rozne/wallpaper-1873891.jpg");
margin: 0;
padding: 0;
}
h1 {color: white;
text-shadow: 0px 0px 100px #000;
text-align: center;
font: 300% Segoe UI, Arial, sans-serif;
}
#drag {width: 200px;
height: 300px;
position: absolute;
top: 100px;
left: 300px;
background: rgba(51, 153, 255, 0.3);
border: 1px solid #3399ff;
display: none;
}
var Gl = {
var Gl = {
isDown: false
};
$(document).ready(function() {
$(this)
.mousedown(function(e) {
$('h1').hide();
$('#drag').show();
Gl.isDown = true;
Gl.tlx = e.pageX,
Gl.tly = e.pageY;
$('#drag').css({
'top': Gl.tly,
'left': Gl.tlx,
'width': 0,
'height': 0
});
})
.mousemove(function(e) {
if (Gl.isDown) {
Gl.brx = e.pageX,
Gl.bry = e.pageY;
if ((Gl.brx > Gl.tlx) && (Gl.bry > Gl.tly)) {
$('#drag').css({
'width': Gl.brx - Gl.tlx,
'height': Gl.bry - Gl.tly
});
} else if ((Gl.brx < Gl.tlx) && (Gl.bry > Gl.tly)) {
$('#drag').css({
'left': Gl.brx,
'width': Gl.tlx - Gl.brx,
'height': Gl.bry - Gl.tly
});
} else if ((Gl.brx > Gl.tlx) && (Gl.bry < Gl.tly)) {
$('#drag').css({
'top': Gl.bry,
'width': Gl.brx - Gl.tlx,
'height': Gl.tly - Gl.bry
});
} else if ((Gl.brx < Gl.tlx) && (Gl.bry < Gl.tly)) {
$('#drag').css({
'left': Gl.brx,
'top': Gl.bry,
'width': Gl.tlx - Gl.brx,
'height': Gl.tly - Gl.bry
});
}
};
})
.mouseup(function() {
Gl.isDown = false;
})
})