{"id":55538,"date":"2022-04-29T03:01:34","date_gmt":"2022-04-28T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55538"},"modified":"2022-04-29T15:42:54","modified_gmt":"2022-04-29T05:42:54","slug":"drag-and-drop-iframe-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/drag-and-drop-iframe-mobile-tutorial\/","title":{"rendered":"Drag and Drop Iframe Mobile Tutorial"},"content":{"rendered":"
\"Drag<\/a>

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

Yesterday’s Drag and Drop Iframe Primer Tutorial<\/a>‘s “Drag Around” (HTML iframe element(s))<\/font> web application based itself on W3Schools<\/a>‘s How To Create a Draggable HTML Element<\/a> non-mobile drag and drop logic. But, can we amend that logic for touch mobile platform gestures?<\/p>\n

\nWell, sometimes. It depends on the complexity of the webpage element structure and content.\n<\/p><\/blockquote>\n

Luckily, our “proof of concept” scenario is so pared down we can swing it via …<\/p>\n\n\n\n\n\n\n
Non-mobile
mouse event<\/th>\n		 … mapped to (with code tweaks) …<\/th>\nMobile
touch event<\/th>\n<\/tr>\n
onmousedown<\/td>\n<\/td>\nontouchstart<\/td>\n<\/tr>\n
onmousemove<\/td>\n<\/td>\nontouchmove<\/td>\n<\/tr>\n
onmouseup<\/td>\n<\/td>\nontouchend<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Yes, I hear you ask?<\/p>\n

\nWhy isn’t the “mapping” for “onmousedown” end up as “ontouchdown”?\n<\/p><\/blockquote>\n

Well, it’s that to help out “ontouchmove” (after all, the most crucial event for “drag and drop” thoughts)<\/font> we hook into a “moving gesture” rather than a “discrete click gesture” we’re thinking.<\/p>\n

And so, below, we highlight<\/font> the “mobile mappings” in the Javascript we needed to do …<\/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 if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {
\n console.log('ontouchdown');
\n document.getElementById(elmnt.id + \"header\").ontouchstart = dragMouseDown;
\n document.getElementById(elmnt.id + \"header\").style.textDecoration = 'underline';
\n } else {<\/font>
\n document.getElementById(elmnt.id + \"header\").onmousedown = dragMouseDown;
\n }<\/font>
\n } else {
\n \/\/ otherwise, move the DIV from anywhere inside the DIV:
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {
\n console.log('Ontouchdown');
\n elmnt.ontouchstart = dragMouseDown;
\n elmnt.style.textDecoration = 'underline';
\n } else {<\/font>
\n elmnt.onmousedown = dragMouseDown;
\n }<\/font>
\n }
\n
\n function dragMouseDown(e) {
\n e = e || window.event;
\n e.preventDefault();
\n \/\/ get the mouse cursor position at startup:
\n \/\/<\/font>pos3 = e.clientX;
\n \/\/<\/font>pos4 = e.clientY;
\n
\n if (e.touches) {
\n if (e.touches[0].pageX) {
\n pos3 = e.touches[0].pageX;
\n pos4 = e.touches[0].pageY;
\n } else {
\n pos3 = e.touches[0].clientX;
\n pos4 = e.touches[0].clientY;
\n }
\n console.log('pos3=' + pos3 + ',pos4=' + pos4);
\n } else if (e.clientX || e.clientY) {<\/font>
\n pos3 = e.clientX;
\n pos4 = e.clientY;
\n } else {
\n pos3 = e.pageX;
\n pos4 = e.pageY;
\n }<\/font>
\n
\n laste=e.target;
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {
\n document.ontouchend = closeDragElement;
\n } else {<\/font>
\n document.onmouseup = closeDragElement;
\n }<\/font>
\n \/\/ call a function whenever the cursor moves:
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {
\n document.ontouchmove = elementDrag;
\n } else {<\/font>
\n document.onmousemove = elementDrag;
\n }<\/font>
\n }
\n
\n function elementDrag(e) {
\n e = e || window.event;
\n e.preventDefault();
\n \/\/ calculate the new cursor position:
\n

\n if (e.touches) {
\n if (e.touches[0].pageX) {
\n
\n pos1 = pos3 - e.touches[0].pageX;
\n pos2 = pos4 - e.touches[0].pageY;
\n pos3 = e.touches[0].pageX;
\n pos4 = e.touches[0].pageY;
\n
\n } else {
\n
\n pos1 = pos3 - e.touches[0].clientX;
\n pos2 = pos4 - e.touches[0].clientY;
\n pos3 = e.touches[0].clientX;
\n pos4 = e.touches[0].clientY;
\n
\n }
\n console.log('pos1=' + pos1 + ',pos2=' + pos2);
\n } else if (e.clientX || e.clientY) {<\/font>
\n pos1 = pos3 - e.clientX;
\n pos2 = pos4 - e.clientY;
\n pos3 = e.clientX;
\n pos4 = e.clientY;
\n } else {
\n pos1 = pos3 - e.pageX;
\n pos2 = pos4 - e.pageY;
\n pos3 = e.pageX;
\n pos4 = e.pageY;
\n }<\/font>
\n

\n \/\/<\/font>pos1 = pos3 - e.clientX;
\n \/\/<\/font>pos2 = pos4 - e.clientY;
\n \/\/<\/font>pos3 = e.clientX;
\n \/\/<\/font>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 if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {
\n document.ontouchmove = null;
\n } else {<\/font>
\n document.onmouseup = null;
\n document.onmousemove = null;
\n }<\/font>
\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

… in your changed<\/a> “Drag Around” (up to 3) HTML Iframe Element(s)<\/a>.<\/p>\n

\n

\n

Previous relevant Drag and Drop Iframe Primer Tutorial<\/a> is shown below.<\/p>\n

\"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