Drag and Drop Iframe Mobile Tutorial
Yesterday’s Drag and Drop Iframe Primer Tutorial‘s “Drag Around” (HTML iframe element(s)) web application based itself on W3Schools‘s How To Create a Draggable HTML Element non-mobile drag and drop logic. But, can we amend that logic for touch mobile platform gestures?
Well, sometimes. It depends on the complexity of the webpage element structure and content.
Luckily, our “proof of concept” scenario is so pared down we can swing it via …
| Non-mobile mouse event |
… mapped to (with code tweaks) … | Mobile touch event |
|---|---|---|
| onmousedown | ontouchstart | |
| onmousemove | ontouchmove | |
| onmouseup | ontouchend |
Yes, I hear you ask?
Why isn’t the “mapping” for “onmousedown” end up as “ontouchdown”?
Well, it’s that to help out “ontouchmove” (after all, the most crucial event for “drag and drop” thoughts) we hook into a “moving gesture” rather than a “discrete click gesture” we’re thinking.
And so, below, we highlight the “mobile mappings” in the Javascript we needed to do …
<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:
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
console.log('ontouchdown');
document.getElementById(elmnt.id + "header").ontouchstart = dragMouseDown;
document.getElementById(elmnt.id + "header").style.textDecoration = 'underline';
} else {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
}
} else {
// otherwise, move the DIV from anywhere inside the DIV:
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
console.log('Ontouchdown');
elmnt.ontouchstart = dragMouseDown;
elmnt.style.textDecoration = 'underline';
} else {
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;
if (e.touches) {
if (e.touches[0].pageX) {
pos3 = e.touches[0].pageX;
pos4 = e.touches[0].pageY;
} else {
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
}
console.log('pos3=' + pos3 + ',pos4=' + pos4);
} else if (e.clientX || e.clientY) {
pos3 = e.clientX;
pos4 = e.clientY;
} else {
pos3 = e.pageX;
pos4 = e.pageY;
}
laste=e.target;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.ontouchend = closeDragElement;
} else {
document.onmouseup = closeDragElement;
}
// call a function whenever the cursor moves:
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.ontouchmove = elementDrag;
} else {
document.onmousemove = elementDrag;
}
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
if (e.touches) {
if (e.touches[0].pageX) {
pos1 = pos3 - e.touches[0].pageX;
pos2 = pos4 - e.touches[0].pageY;
pos3 = e.touches[0].pageX;
pos4 = e.touches[0].pageY;
} else {
pos1 = pos3 - e.touches[0].clientX;
pos2 = pos4 - e.touches[0].clientY;
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
}
console.log('pos1=' + pos1 + ',pos2=' + pos2);
} else if (e.clientX || e.clientY) {
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
} else {
pos1 = pos3 - e.pageX;
pos2 = pos4 - e.pageY;
pos3 = e.pageX;
pos4 = e.pageY;
}
//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 + ',';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.ontouchmove = null;
} else {
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>
… in your changed “Drag Around” (up to 3) HTML Iframe Element(s).
Previous relevant Drag and Drop Iframe Primer Tutorial is shown below.
Drag and Drop Iframe Primer Tutorial
We were “really taken” by the possibilities trying out How To Create a Draggable HTML Element (by W3Schools), 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.
The Javascript …
<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>
… is interesting in the timing of when some “drag header” elements should be turned into position:absolute (with top:[“drag header” element].getBoundingClientRect().top and left:[“drag header” element].getBoundingClientRect().left) determined in reverse order so that the initial relative position can be the guide for the establishment of reasonable top and left absolute positions.
So feel free to try today’s proof of concept “Drag Around” web application.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
