{"id":55532,"date":"2022-04-28T03:01:48","date_gmt":"2022-04-27T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55532"},"modified":"2022-04-29T12:32:25","modified_gmt":"2022-04-29T02:32:25","slug":"drag-and-drop-iframe-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/drag-and-drop-iframe-primer-tutorial\/","title":{"rendered":"Drag and Drop Iframe Primer Tutorial"},"content":{"rendered":"
\"Drag<\/a>

Drag and Drop Iframe Primer Tutorial<\/p><\/div>\n

We were “really taken” by the possibilities trying out How To Create a Draggable HTML Element<\/a> (by W3Schools<\/a>), to drag and drop elements on non-mobile webpages. So much so, we wrote a “proof of concept” dragger and dropper of up to three iframe elements in the one webpage.<\/p>\n

The Javascript …<\/p>\n


\n<script type='text\/javascript'>
\nvar goh='';
\nvar css='';
\nvar laste=null;
\nvar sofar=',';
\n
\nfunction dragit() {
\n var sx='', isx=1;
\n var ksx=isx;
\n var rects=null;
\n

\n if (laste) {
\n
\n isx=1;
\n for (var jsx=1; jsx<=ksx; jsx++) {
\n \/\/if (document.getElementById(\"mydiv\" + sx + \"header\")) {
\n \/\/ document.getElementById(\"mydiv\" + sx + \"header\").style.position='absolute';
\n \/\/}
\n if (document.getElementById(\"mydiv\" + sx) && sofar.indexOf(',if' + sx + ',') == -1) {
\n \/\/alert(sx);
\n dragElement(document.getElementById(\"mydiv\" + sx));
\n }
\n isx++;
\n sx='' + isx;
\n }
\n
\n } else {
\n \/\/ Make the DIV(s) element draggable:
\n ksx=4;
\n sx='4';
\n while (!document.getElementById(\"mydiv\" + sx)) { ksx--; sx=('' + ksx).replace(\/^1$\/g,''); }
\n isx=ksx;
\n while (document.getElementById(\"mydiv\" + sx)) {
\n if (document.getElementById(\"mydiv\" + sx + \"header\")) {
\n rects=document.getElementById(\"mydiv\" + sx + \"header\").getBoundingClientRect();
\n document.getElementById(\"mydiv\" + sx + \"header\").style.position='absolute';
\n document.getElementById(\"mydiv\" + sx + \"header\").style.top='' + rects.top + 'px';
\n document.getElementById(\"mydiv\" + sx + \"header\").style.left='' + rects.left + 'px';
\n }
\n dragElement(document.getElementById(\"mydiv\" + sx));
\n isx--;
\n sx=('' + isx).replace(\/^1$\/g,'');
\n }
\n isx=ksx;
\n \/\/alert(isx);
\n if (1 == 3) {
\n if (isx == 2) {
\n document.getElementById(\"mydiv\" + \"header\").style.height='100vh';
\n } else if (isx == 3) {
\n document.getElementById(\"mydiv\" + \"header\").style.height='40vh';
\n document.getElementById(\"mydiv2\" + \"header\").style.height='40vh';
\n \/\/document.getElementById(\"if\" + \"\").style.height='100%';
\n \/\/document.getElementById(\"if2\" + \"\").style.height='100%';
\n } else {
\n document.getElementById(\"mydiv\" + \"header\").style.height='30vh';
\n document.getElementById(\"mydiv2\" + \"header\").style.height='30vh';
\n document.getElementById(\"mydiv3\" + \"header\").style.height='30vh';
\n \/\/document.getElementById(\"if\" + \"\").style.height='100%';
\n \/\/document.getElementById(\"if2\" + \"\").style.height='100%';
\n \/\/document.getElementById(\"if3\" + \"\").style.height='100%';
\n }
\n }
\n

\n sx='';
\n ksx=isx;
\n isx=1;
\n for (var jsx=1; jsx<=ksx; jsx++) {
\n \/\/if (document.getElementById(\"mydiv\" + sx + \"header\")) {
\n \/\/ document.getElementById(\"mydiv\" + sx + \"header\").style.position='absolute';
\n \/\/}
\n \/\/if (document.getElementById(\"mydiv\" + sx)) {
\n \/\/ dragElement(document.getElementById(\"mydiv\" + sx));
\n \/\/}
\n if (document.getElementById(\"mydiv\" + sx + \"header\") && !document.getElementById(\"if\" + sx)) {
\n document.getElementById(\"mydiv\" + sx + \"header\").style.visibility='hidden';
\n document.getElementById(\"mydiv\" + sx + \"header\").style.display='none';
\n }
\n isx++;
\n sx='' + isx;
\n if (document.getElementById(\"mydiv\" + sx + \"header\") && !document.getElementById(\"if\" + sx)) {
\n document.getElementById(\"mydiv\" + sx + \"header\").style.visibility='hidden';
\n document.getElementById(\"mydiv\" + sx + \"header\").style.display='none';
\n }
\n }
\n }
\n

\n}
\n
\nfunction dragElement(elmnt) {
\n var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
\n if (document.getElementById(elmnt.id + \"header\")) {
\n \/\/ if present, the header is where you move the DIV from:
\n document.getElementById(elmnt.id + \"header\").onmousedown = dragMouseDown;
\n } else {
\n \/\/ otherwise, move the DIV from anywhere inside the DIV:
\n elmnt.onmousedown = dragMouseDown;
\n }
\n
\n function dragMouseDown(e) {
\n e = e || window.event;
\n e.preventDefault();
\n \/\/ get the mouse cursor position at startup:
\n pos3 = e.clientX;
\n pos4 = e.clientY;
\n laste=e.target;
\n document.onmouseup = closeDragElement;
\n \/\/ call a function whenever the cursor moves:
\n document.onmousemove = elementDrag;
\n }
\n
\n function elementDrag(e) {
\n e = e || window.event;
\n e.preventDefault();
\n \/\/ calculate the new cursor position:
\n pos1 = pos3 - e.clientX;
\n pos2 = pos4 - e.clientY;
\n pos3 = e.clientX;
\n pos4 = e.clientY;
\n \/\/ set the element's new position:
\n elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";
\n elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";
\n goh=elmnt.outerHTML;
\n if (css == '') {
\n css=\"?css\" + e.target.id.replace('mydiv','').replace('header','').replace('if','') + \"=\" + encodeURIComponent('top:' + elmnt.style.top + ';left:' + elmnt.style.left + ';');
\n } else {
\n if (css.indexOf('css' + e.target.id.replace('mydiv','').replace('header','') + '=') != -1) {
\n 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 + ';'));
\n } else {
\n css+=\"&css\" + e.target.id.replace('mydiv','').replace('header','').replace('if','') + \"=\" + encodeURIComponent('top:' + elmnt.style.top + ';left:' + elmnt.style.left + ';');
\n }
\n }
\n console.log(goh);
\n }
\n
\n function closeDragElement() {
\n \/\/ stop moving when mouse button is released:
\n sofar+=laste.id + ',';
\n document.onmouseup = null;
\n document.onmousemove = null;
\n \/\/alert(goh);
\n \/\/dragit();
\n goh='';
\n if (css != '') {
\n \/\/document.getElementById('myh1').innerHTML+=' ' + decodeURIComponent(css);
\n setTimeout(st, 3000);
\n }
\n }
\n}
\n

\n function st() {
\n if ((location.search.split('css=')[1] ? decodeURIComponent(location.search.split('css=')[1].split('&')[0]) : '') != '' && css.indexOf('css=') == -1) {
\n css+='&css=' + encodeURIComponent((location.search.split('css=')[1] ? decodeURIComponent(location.search.split('css=')[1].split('&')[0]) : ''));
\n }
\n if ((location.search.split('css2=')[1] ? decodeURIComponent(location.search.split('css2=')[1].split('&')[0]) : '') != '' && css.indexOf('css2=') == -1) {
\n css+='&css2=' + encodeURIComponent((location.search.split('css2=')[1] ? decodeURIComponent(location.search.split('css2=')[1].split('&')[0]) : ''));
\n }
\n if ((location.search.split('css3=')[1] ? decodeURIComponent(location.search.split('css3=')[1].split('&')[0]) : '') != '' && css.indexOf('css3=') == -1) {
\n css+='&css3=' + encodeURIComponent((location.search.split('css3=')[1] ? decodeURIComponent(location.search.split('css3=')[1].split('&')[0]) : ''));
\n }
\n \/\/location.href=document.URL.split('#')[0].split('?')[0] + css + '&numsel=' + document.getElementById('numsel').value;
\n }
\n<\/script>
\n<\/code><\/p>\n

… is interesting in the timing of when some “drag header” elements should be turned into position:absolute<\/i> (with top:[“drag header” element].getBoundingClientRect<\/a>().top and left:[“drag header” element].getBoundingClientRect().left) determined in reverse order so that the initial relative<\/i> position can be the guide for the establishment of reasonable top<\/i> and left<\/i> absolute<\/i> positions.<\/p>\n

So feel free to try today’s proof of concept<\/a> “Drag Around” web application<\/a>.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n