<html>
<head>
<title>Drag Around - RJM Programming - April, 2022</title>
<script type='text/javascript'>
var goh='';
var css='';
var laste=null;
var sofar=',';
function dragit() {
var sx='', isx=1;
var ksx=isx;
var rects=null;
if (laste) {
isx=1;
for (var jsx=1; jsx<=ksx; jsx++) {
//if (document.getElementById("mydiv" + sx + "header")) {
// document.getElementById("mydiv" + sx + "header").style.position='absolute';
//}
if (document.getElementById("mydiv" + sx) && sofar.indexOf(',if' + sx + ',') == -1) {
//alert(sx);
dragElement(document.getElementById("mydiv" + sx));
}
isx++;
sx='' + isx;
}
} else {
// Make the DIV(s) element draggable:
ksx=4;
sx='4';
while (!document.getElementById("mydiv" + sx)) { ksx--; sx=('' + ksx).replace(/^1$/g,''); }
isx=ksx;
while (document.getElementById("mydiv" + sx)) {
if (document.getElementById("mydiv" + sx + "header")) {
rects=document.getElementById("mydiv" + sx + "header").getBoundingClientRect();
document.getElementById("mydiv" + sx + "header").style.position='absolute';
document.getElementById("mydiv" + sx + "header").style.top='' + rects.top + 'px';
document.getElementById("mydiv" + sx + "header").style.left='' + rects.left + 'px';
}
dragElement(document.getElementById("mydiv" + sx));
isx--;
sx=('' + isx).replace(/^1$/g,'');
}
isx=ksx;
//alert(isx);
if (1 == 3) {
if (isx == 2) {
document.getElementById("mydiv" + "header").style.height='100vh';
} else if (isx == 3) {
document.getElementById("mydiv" + "header").style.height='40vh';
document.getElementById("mydiv2" + "header").style.height='40vh';
//document.getElementById("if" + "").style.height='100%';
//document.getElementById("if2" + "").style.height='100%';
} else {
document.getElementById("mydiv" + "header").style.height='30vh';
document.getElementById("mydiv2" + "header").style.height='30vh';
document.getElementById("mydiv3" + "header").style.height='30vh';
//document.getElementById("if" + "").style.height='100%';
//document.getElementById("if2" + "").style.height='100%';
//document.getElementById("if3" + "").style.height='100%';
}
}
sx='';
ksx=isx;
isx=1;
for (var jsx=1; jsx<=ksx; jsx++) {
//if (document.getElementById("mydiv" + sx + "header")) {
// document.getElementById("mydiv" + sx + "header").style.position='absolute';
//}
//if (document.getElementById("mydiv" + sx)) {
// dragElement(document.getElementById("mydiv" + sx));
//}
if (document.getElementById("mydiv" + sx + "header") && !document.getElementById("if" + sx)) {
document.getElementById("mydiv" + sx + "header").style.visibility='hidden';
document.getElementById("mydiv" + sx + "header").style.display='none';
}
isx++;
sx='' + isx;
if (document.getElementById("mydiv" + sx + "header") && !document.getElementById("if" + sx)) {
document.getElementById("mydiv" + sx + "header").style.visibility='hidden';
document.getElementById("mydiv" + sx + "header").style.display='none';
}
}
}
}
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
laste=e.target;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
goh=elmnt.outerHTML;
if (css == '') {
css="?css" + e.target.id.replace('mydiv','').replace('header','').replace('if','') + "=" + encodeURIComponent('top:' + elmnt.style.top + ';left:' + elmnt.style.left + ';');
} else {
if (css.indexOf('css' + e.target.id.replace('mydiv','').replace('header','') + '=') != -1) {
css=css.replace(css.split('css' + e.target.id.replace('mydiv','').replace('header','').replace('if','') + '=')[1].split('&')[0], encodeURIComponent('top:' + elmnt.style.top + ';left:' + elmnt.style.left + ';'));
} else {
css+="&css" + e.target.id.replace('mydiv','').replace('header','').replace('if','') + "=" + encodeURIComponent('top:' + elmnt.style.top + ';left:' + elmnt.style.left + ';');
}
}
console.log(goh);
}
function closeDragElement() {
// stop moving when mouse button is released:
sofar+=laste.id + ',';
document.onmouseup = null;
document.onmousemove = null;
//alert(goh);
//dragit();
goh='';
if (css != '') {
//document.getElementById('myh1').innerHTML+=' ' + decodeURIComponent(css);
setTimeout(st, 3000);
}
}
}
function st() {
if ((location.search.split('css=')[1] ? decodeURIComponent(location.search.split('css=')[1].split('&')[0]) : '') != '' && css.indexOf('css=') == -1) {
css+='&css=' + encodeURIComponent((location.search.split('css=')[1] ? decodeURIComponent(location.search.split('css=')[1].split('&')[0]) : ''));
}
if ((location.search.split('css2=')[1] ? decodeURIComponent(location.search.split('css2=')[1].split('&')[0]) : '') != '' && css.indexOf('css2=') == -1) {
css+='&css2=' + encodeURIComponent((location.search.split('css2=')[1] ? decodeURIComponent(location.search.split('css2=')[1].split('&')[0]) : ''));
}
if ((location.search.split('css3=')[1] ? decodeURIComponent(location.search.split('css3=')[1].split('&')[0]) : '') != '' && css.indexOf('css3=') == -1) {
css+='&css3=' + encodeURIComponent((location.search.split('css3=')[1] ? decodeURIComponent(location.search.split('css3=')[1].split('&')[0]) : ''));
}
//location.href=document.URL.split('#')[0].split('?')[0] + css + '&numsel=' + document.getElementById('numsel').value;
}
</script>
</head>
<body onload=" document.getElementById('numsel').value=(location.search.split('numsel=')[1] ? decodeURIComponent(location.search.split('numsel=')[1].split('&')[0]) : '1'); setTimeout(dragit,1000);" style='width:100%;height:100%;'>
<h1 id=myh1>Drag Around <select onchange="location.href=document.URL.split('#')[0].split('?')[0] + '?numsel=' + this.value; " id=numsel><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></h1>
<h3>RJM Programming - April, 2022</h3>
<h4>Thanks to <a target=_blank title='>How to Create a Draggable HTML' href='https://www.w3schools.com/howto/howto_js_draggable.asp'>How to Create a Draggable HTML</a></h4><br>
<div id=mydivheader style='position:absoXlute;width:100%;height:30vh;display:block;'>
<span id=headermydiv style='vertical-align:top;color:green;'> Drag from here ... </span><script type='text/javascript'> var one=(location.search.split('numsel=')[1] ? decodeURIComponent(location.search.split('numsel=')[1].split('&')[0]) : 1); document.write("<div id=mydiv style='position:absolute;border:1px dotted red;width:70%;height:" + eval(-90 + eval('' + screen.height) / eval('' + one)) + "px;display:inline-block;opacity:0.7;" + (location.search.split('css=')[1] ? decodeURIComponent(location.search.split('css=')[1].split('&')[0]) : '') + "'><iframe id=if src='//www.rjmprogramming.com.au' style='width:100%;height:" + eval(-90 + eval('' + screen.height) / eval('' + one)) + "px;opacity:0.7;'></iframe></div>"); </script>
</div>
<div id=mydiv2header style='position:absoXlute;width:100%;height:30vh;display:block;'>
<span id=header2mydiv style='vertical-align:top;color:green;'> Drag from here ... </span><script type='text/javascript'> var two=(location.search.split('numsel=')[1] ? decodeURIComponent(location.search.split('numsel=')[1].split('&')[0]) : 1); if (two >= 2) { document.write("<div id=mydiv2 style='position:absolute;border:1px dotted red;width:70%;height:" + eval(-90 + eval('' + screen.height) / eval('' + two)) + "px;display:inline-block;opacity:0.7;" + (location.search.split('css2=')[1] ? decodeURIComponent(location.search.split('css2=')[1].split('&')[0]) : '') + "'><iframe id=if2 src='//www.rjmprogramming.com.au/About_Us.html' style='width:100%;height:" + eval(-90 + eval('' + screen.height) / eval('' + two)) + "px;opacity:0.7;'></iframe></div>"); } </script>
</div>
<div id=mydiv3header style='position:absoXlute;width:100%;height:30vh;display:block;'>
<span id=header3mydiv style='vertical-align:top;color:green;'> Drag from here ... </span><script type='text/javascript'> var three=(location.search.split('numsel=')[1] ? decodeURIComponent(location.search.split('numsel=')[1].split('&')[0]) : 1); if (three >= 3) { document.write("<div id=mydiv3 style='position:absolute;border:1px dotted red;width:70%;height:" + eval(-90 + eval('' + screen.height) / eval('' + three)) + "px;display:inline-block;opacity:0.7;" + (location.search.split('css3=')[1] ? decodeURIComponent(location.search.split('css3=')[1].split('&')[0]) : '') + "'><iframe id=if3 src='//www.rjmprogramming.com.au/Contact_Us.html' style='width:100%;height:" + eval(-90 + eval('' + screen.height) / eval('' + three)) + "px;opacity:0.7;'></iframe></div>"); } </script>
</div>
</body>
</html>