Drag and Drop Iframe Primer Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Drag and Drop Iframe Primer Tutorial

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.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *