<html>
<head>
<title>Experimental Drag and Drop - RJM Programming - July, 2023 ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData</title>
<style>
th.source {
border: 1px solid transparent;
}
</style>
<script type=text/javascript>
var clonedata='', clonedatatwo='', pos3=0, pos4=0, secs=0, score=0, tdid='', tdcheck=true;
var tdnum=location.search.split('tdnum=')[1] ? eval(location.search.split('tdnum=')[1].split('&')[0]) : 9;
var across=location.search.split('across=')[1] ? eval(location.search.split('across=')[1].split('&')[0]) : 3;
var sdone=false;
var sourceid='sou' + 'rce';
var shuffle=('' + location.hash + ' ' + location.search + ' ').split('shuffle=')[1] ? true : false;
var yourblurb=location.search.split('yourblurb=')[1] ? decodeURIComponent('' + location.hash + ' ' + location.search.split('yourblurb=')[1].split('&')[0]).replace(/\+/g,' ').replace(/\ \ \ /g,' + ') : '';
var sourcenum=location.search.split('sourcenum=')[1] ? Math.floor(eval(('' + location.search.split('sourcenum=')[1].split('&')[0]) + '.0')) : 1;
if ((document.URL.split('#')[0] + '&').indexOf('sourcenum=&') != -1 && sourcenum == 1) { sourcenum=0; }
var originalsn=sourcenum;
var originalsh=shuffle;
var origsnc='';
var bdone=false;
var lastbco=null;
var lastoh='';
var lastih='';
var lastevid='';
var lastid='';
var prefx='th';
var cpa=['bK','wK','bQ','wQ','bR1','wR1','bR2','wR2','bB1','wB1','bB2','wB2','bK1','wK1','bK2','wK2','bP1','wP1','bP2','wP2','bP3','wP3','bP4','wP4','bP5','wp5','bP6','wP6','bP7','wP7','bP8','wP8'];
var staidmap=[4,60,3,59,0,56,7,63, 2,58,5,61, 1,57,6,62, 8,48,9,49,10,50,11,51,12,52,13,53,14,54,15,55];
function butwhatifchessgame(inspanstuff) {
var outspanstuff=inspanstuff, ii=0, thisth='';
if (document.URL.indexOf('/chess') != -1 && document.URL.indexOf('traditional=') != -1) {
var ths=[];
var ourmap=[];
var thas=inspanstuff.split('</th>');
for (ii=0; ii<thas.length; ii++) {
if (thas[ii].trim() != '') {
thisth='<th' + thas[ii].split('<th')[-1 + eval('' + thas[ii].split('<th').length)] + '</th>';
ths.push(thisth);
} // outspanstuff=outspanstuff.replace(thisth, '');
}
var outtg=document.getElementById('mytable').innerHTML;
thas=outtg.split('</td>');
//alert(65);
for (ii=0; ii<thas.length; ii++) {
if (staidmap[ii] >= 0 && document.URL.indexOf('traditional=mayhem') == -1) {
ourmap.push(staidmap[ii]);
} else {
ourmap.push(Math.floor(Math.random() * 64));
}
}
//alert(165);
for (ii=(-1 + eval('' + ths.length)); ii>=0; ii--) {
//alert(thas[ii] + ' ... ' + ths[ii]);
outtg=outtg.replace(thas[ourmap[ii]], thas[ourmap[ii]] + ths[ii].replace(/th/g,'span').replace('<span ', '<span style=font-size:60px; ontouchstart=fit(this); onmouseover=fit(this); onclick=fit(this); ')); // .replace(/th/g,'SPAN')
}
document.getElementById('mytable').innerHTML=outtg;
return '<td></td>';
}
return outspanstuff;
}
function askmore() {
var yb=prompt('Optionally enter your own new sentence to set for the user to unscramble. The assumption is there that an absolute URL as a word represents an image URL where hashtag #leftoff#topoff#width#height could optionally be appended.', '');
if (yb != null) {
if (yb.trim() != '') {
location.href=(document.URL.replace(('#' + location.hash).replace('##','#').replace(/^\#$/g,''),'') + ('#' + location.hash).replace('##','#').replace(/^\#$/g,'')).replace('sourcenum=', 'sourceXnum=').replace('yourblurb=', 'yourXblurb=').replace('?', '?yourblurb=' + encodeURIComponent(yb) + '&sourcenum=&').replace('#','&');
}
}
}
function cloneize() {
var irws=1;
var firsttogo='td33', ifirst=9;
if (tdcheck) {
tdcheck=false;
if (document.URL.indexOf('/chess') != -1) {
document.getElementById('clone').style.display='none';
}
if (shuffle) {
document.getElementById('spmore').innerHTML='<a title="Set your own sentence for the user to unscramble." style=text-decoration:none;cursor:pointer; onclick=askmore();>+</a>';
}
if (yourblurb != '') {
document.getElementById('source').innerHTML=yourblurb;
yourblurb='';
}
if (sourcenum <= 0 && !sdone) {
var sncx=document.getElementById('source').innerText;
var swordsx=sncx.split(' ');
if (tdnum == 9 && document.URL.indexOf('tdnum=') == -1) {
tdnum=eval('' + swordsx.length);
}
} else if (sourcenum != 1 && !sdone && tdnum == 9) {
tdnum=eval('' + sourcenum);
}
if (tdnum == 3) {
if (document.getElementById('tr3')) {
document.getElementById('tr3').style.display='none';
document.getElementById('tr2').style.display='none';
}
document.getElementById('td11').rowspan='3';
document.getElementById('td12').rowspan='3';
document.getElementById('td13').rowspan='3';
} else if (tdnum == 6) {
if (document.getElementById('tr3')) {
document.getElementById('tr3').style.display='none';
}
document.getElementById('td21').rowspan='2';
document.getElementById('td22').rowspan='2';
document.getElementById('td23').rowspan='2';
} else if (tdnum < 9) {
if (document.getElementById('td33')) {
for (ifirst=9; ifirst>tdnum; ifirst--) {
document.getElementById(firsttogo).style.display='none';
firsttogo=firsttogo.replace('td12','tdx11').replace('td21','tdx12').replace('td21','tdx13').replace('td22','tdx21').replace('td23','tdx22').replace('td31','tdx23').replace('td32','tdx31').replace('td33','tdx32').replace('tdx','td');
}
}
} else if (tdnum > 9) {
var arow='', rownum=4;
if (document.getElementById('target').innerHTML.indexOf('td221') != -1 && document.URL.indexOf('/chess') != -1) {
var wastheih=document.getElementById('target').innerHTML;
//alert(wastheih);
for (var ijkx=1; ijkx<=tdnum; ijkx++) {
wastheih=wastheih.replace('>' + ijkx + '<', '><');
}
document.getElementById('target').innerHTML=wastheih;
} else {
for (var ijk=10; ijk<=tdnum; ijk++) {
if (eval(ijk % 3) == 1) {
rownum=eval(1 + eval(eval(-1 + ijk) / 3));
arow='<t' + 'r id=tr' + rownum + '><t' + 'd id=td' + rownum + '1>' + ijk + '</t' + 'd></t' + 'r>';
//alert('1:' + ijk + ' ' + arow);
} else if (eval(ijk % 3) == 0) {
arow=arow.replace('</t' + 'r>', '<t' + 'd id=td' + rownum + '3>' + ijk + '</t' + 'd></t' + 'r>');
//alert('2:' + ijk + ' ' + arow);
document.getElementById('mytable').innerHTML+=arow;
arow='';
} else {
arow=arow.replace('</t' + 'r>', '<t' + 'd id=td' + rownum + '2>' + ijk + '</t' + 'd></t' + 'r>');
//alert('3:' + ijk + ' ' + arow);
}
}
}
document.getElementById('mytable').innerHTML+=arow;
}
}
if (across != 3) {
var sofartd='', two=2;
var wasih=document.getElementById('mytable').innerHTML;
var rowas=wasih.split('</' + 'tr>');
for (irws=1; irws<rowas.length; irws++) {
if (rowas[irws].length > 3 && rowas[irws].replace(String.fromCharCode(10),'').indexOf('</') != 0) {
wasih=wasih.replace(rowas[eval(-1 + irws)] + '</' + 'tr>', rowas[eval(-1 + irws)] + '<!-' + '-/' + 'tr>');
}
}
rowas=wasih.split('<t' + 'r');
for (irws=2; irws<rowas.length; irws++) {
if (rowas[irws].length > 3) {
wasih=wasih.replace('<t' + 'r' + rowas[irws], '<t' + 'r' + rowas[irws].replace(rowas[irws].split('>')[0] + '>', '-' + '->'));
}
}
rowas=wasih.split('</t' + 'd>');
for (irws=0; irws<rowas.length; irws++) {
if (eval(eval(1 + irws) % across) == 0) {
sofartd+=rowas[irws] + '</t' + 'd>';
wasih=wasih.replace(sofartd, sofartd + '</t' + 'r><t' + 'r id=tr' + two + '>');
sofartd='';
two++;
} else {
sofartd+=rowas[irws] + '</t' + 'd>';
}
}
document.getElementById('mytable').innerHTML=wasih;
}
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
document.getElementById(sourceid).setAttribute('contenteditable',false);
document.getElementById('strongs').innerHTML='';
}
if (clonedata != document.getElementById(sourceid).innerHTML) {
clonedata=document.getElementById(sourceid).outerHTML.replace(' id=', ' data-id=');
if (!document.getElementById('callback') && document.URL.indexOf('/chess') == -1) { document.getElementById('clone').style.display='inline-block'; }
}
if (sourcenum != 1 && !sdone) {
sdone=true;
var snc=document.getElementById('source').innerText;
origsnc=snc;
var swords=snc.split(' ');
var ourone=1, onepos=0;
var sarr=[], sarrsofar=',';
var ccbit=' cellpadding=0 cellspacing=0 ', onerand='';
var spanstuff='', kspan=0;
if (eval('' + sourcenum) == eval('' + swords.length) || eval('' + sourcenum) <= 0 || shuffle) {
if (eval('' + sourcenum) <= 0) { sourcenum=eval('' + swords.length); }
for (var inb=0; inb<sourcenum; inb++) {
if (!shuffle) {
//alert('*' + swords[inb] + '*');
sarr.push(inb);
} else {
if (sarrsofar == ',') {
onerand='' + Math.floor(Math.random() * sourcenum);
sarrsofar+='' + onerand + ',';
sarr.push(eval(onerand));
} else {
while (sarrsofar.indexOf(',' + onerand + ',') != -1) {
onerand='' + Math.floor(Math.random() * sourcenum);
}
sarrsofar+='' + onerand + ',';
sarr.push(eval(onerand));
}
}
}
ourone=-1;
ccbit=' cellpadding=2 cellspacing=0 ';
setInterval(shufflegamecheck, 3000);
} else if (eval('' + snc.length) > eval('' + sourcenum)) {
ourone=Math.floor(eval(eval('' + snc.length) / eval('' + sourcenum)));
}
for (kspan=0; kspan<eval('' + sourcenum); kspan++) {
if (ourone < 0) {
spanstuff+='<span data-piece="' + cpa[kspan] + '" class=source draggable="true" id=span' + kspan + cbi('>' + ('' + swords[sarr[kspan]]).replace(/undefined$/g, '')) + '</span>';
} else if (eval(eval('' + onepos) + eval('' + ourone)) < eval('' + snc.length) && eval(1 + kspan) != eval('' + sourcenum)) {
spanstuff+='<span data-piece="' + cpa[kspan] + '" class=source draggable="true" id=span' + kspan + cbi('>' + snc.substring(onepos).substring(0,ourone)) + '</span>';
} else if (eval('' + onepos) < eval('' + snc.length)) {
//alert(snc.substring(onepos));
spanstuff+='<span data-piece="' + cpa[kspan] + '" class=source draggable="true" id=span' + kspan + cbi('>' + snc.substring(onepos)) + '</span>';
} else {
spanstuff+='<span data-piece="' + cpa[kspan] + '" class=source draggable="true" id=span' + kspan + '> </span>';
}
onepos+=ourone;
}
//alert(888);
document.getElementById('dsource').innerHTML='<ta' + 'ble' + ccbit + ' id=source style="background-color:#f0f0f0;"><t' + 'r>' + butwhatifchessgame(spanstuff.replace(/span/g, 'th')) + '</t' + 'r></ta' + 'ble><br>';
//document.getElementById('dsource').style.textAlign='left';
if (document.getElementById('mybut') && originalsn <= 0 && originalsh) {
document.getElementById('mybut').innerHTML='Piece Sentence Back Together Again Game';
document.getElementById('dsource').style.width='100%';
document.getElementById('dsource').style.display='inline-block';
document.getElementById('source').align='left';
} //else {
//alert(originalsn);
//alert(originalsh);
//}
setTimeout(aathen, 50);
setTimeout(cloneize, 100);
}
// https://www.puzzles-on-line-niche.com/images/Rebus1pictograph.jpg#0#0#150#120 https://www.puzzles-on-line-niche.com/images/Rebus1pictograph.jpg#150#0#150#120 https://www.puzzles-on-line-niche.com/images/Rebus1pictograph.jpg#0#120#150#120 https://www.puzzles-on-line-niche.com/images/Rebus1pictograph.jpg#150#120#150#120
function cbi(insw) { // #leftoff#topoff#width#height
var outsw=insw;
var ourbp='';
var ourbs='background-size:contain;width:80px;height:80px;';
if (insw.substring(1).toLowerCase().replace(/^\/\//g, 'http://').replace('https:','http:').indexOf('http:') == 0) {
if (eval('' + insw.substring(1).split('#').length) >= 2) {
if (eval('' + insw.substring(1).split('#').length) >= 3) {
if (eval('' + insw.substring(1).split('#').length) < 5) {
ourbp='background-position: -' + insw.substring(1).split('#')[1] + 'px -' + insw.substring(1).split('#')[2] + 'px;';
ourbs=' background-size:80px 80px;width:80px;height:80px;';
ourbs+=ourbp;
outsw=' style="background:URL(' + insw.substring(1).split('#')[0] + ');background-repeat:no-repeat;' + ourbs + 'font-color:transparent;color:transparent;display:inline-block;overflow-x:hidden;">' + insw.substring(1);
} else {
ourbp='background-position: -' + insw.substring(1).split('#')[1] + 'px -' + insw.substring(1).split('#')[2] + 'px;';
//ourbs=' 80px 80px;width:80px;height:80px;';
ourbs=' background-size:' + insw.substring(1).split('#')[3] + 'px ' + insw.substring(1).split('#')[4] + 'px;background-position: -' + insw.substring(1).split('#')[1] + 'px -' + insw.substring(1).split('#')[2] + 'px;width:' + insw.substring(1).split('#')[3] + 'px;height:' + insw.substring(1).split('#')[4] + 'px;';
ourbs=' width:' + insw.substring(1).split('#')[3] + 'px;height:' + insw.substring(1).split('#')[4] + 'px;';
ourbs+=ourbp;
outsw=' style="background:URL(' + insw.substring(1).split('#')[0] + ');background-repeat:no-repeat;' + ourbs + 'font-color:transparent;color:transparent;display:inline-block;overflow-x:hidden;">' + insw.substring(1);
}
} else {
ourbs+=ourbp;
outsw=' style="background:URL(' + insw.substring(1).split('#')[0] + ');background-repeat:no-repeat;' + ourbs + 'font-color:transparent;color:transparent;display:inline-block;overflow-x:hidden;">' + insw.substring(1);
}
} else {
ourbs+=ourbp;
outsw=' style="background:URL(' + insw.substring(1) + ');background-repeat:no-repeat;' + ourbs + 'font-color:transparent;color:transparent;display:inline-block;overflow-x:hidden;">' + insw.substring(1);
}
} else if (insw.substring(1).toLowerCase().indexOf('data:image/') == 0) {
if (eval('' + insw.substring(1).split('#').length) >= 2) {
if (eval('' + insw.substring(1).split('#').length) >= 3) {
if (eval('' + insw.substring(1).split('#').length) < 5) {
ourbp='background-position: -' + insw.substring(1).split('#')[1] + 'px -' + insw.substring(1).split('#')[2] + 'px;';
ourbs=' background-size:80px 80px;width:80px;height:80px;';
ourbs+=ourbp;
outsw=' style="background:URL(' + insw.substring(1).split('#')[0] + ');background-repeat:no-repeat;' + ourbs + 'font-color:transparent;color:transparent;display:inline-block;overflow-x:hidden;">' + insw.substring(1);
} else {
ourbp='background-position: -' + insw.substring(1).split('#')[1] + 'px -' + insw.substring(1).split('#')[2] + 'px;';
//ourbs=' background-size:80px 80px;width:80px;height:80px;';
ourbs=' background-size:' + insw.substring(1).split('#')[3] + 'px ' + insw.substring(1).split('#')[4] + 'px;background-position: -' + insw.substring(1).split('#')[1] + 'px -' + insw.substring(1).split('#')[2] + 'px;width:' + insw.substring(1).split('#')[3] + 'px;height:' + insw.substring(1).split('#')[4] + 'px;';
ourbs=' width:' + insw.substring(1).split('#')[3] + 'px;height:' + insw.substring(1).split('#')[4] + 'px;';
ourbs+=ourbp;
outsw=' style="background:URL(' + insw.substring(1).split('#')[0] + ');background-repeat:no-repeat;' + ourbs + 'font-color:transparent;color:transparent;display:inline-block;overflow-x:hidden;">' + insw.substring(1);
}
} else {
ourbs+=ourbp;
outsw=' style="background:URL(' + insw.substring(1).split('#')[0] + ');background-repeat:no-repeat;' + ourbs + 'font-color:transparent;color:transparent;display:inline-block;overflow-x:hidden;">' + insw.substring(1);
}
} else {
ourbs+=ourbp;
outsw=' style="background:URL(' + insw.substring(1) + ');background-repeat:no-repeat;' + ourbs + 'font-color:transparent;color:transparent;display:inline-block;overflow-x:hidden;">' + insw.substring(1);
}
}
return outsw;
}
function workalert(insg) {
var outsg=insg;
//alert('' + sourcenum + ' 1:' + insg);
for (var ii=sourcenum; ii>=1; ii--) {
if (outsg.indexOf('' + ii + 'http') != -1) {
outsg=outsg.replace('' + ii + 'http', 'http');
//alert('0:' + outsg);
} else {
outsg=outsg.replace('' + ii, '');
}
}
// alert('2:' + outsg);
insg=outsg;
outsg='';
for (var iii=0; iii<insg.length; iii++) {
if (insg.charAt(iii) <= ' ') {
outsg+=' ';
} else {
outsg+=insg.substring(iii).substring(0,1);
}
}
//alert('3:' + outsg);
while (outsg.indexOf(' ') != -1) {
outsg=outsg.replace(' ', ' ');
}
//alert('4:' + outsg);
return outsg;
}
function shufflegamecheck() {
if (document.URL.indexOf('/chess') == -1) {
if (document.getElementById('source').innerText.trim() == '' && !bdone) {
if (workalert(document.getElementsByTagName('tab' + 'le')[1].innerText).trim() == origsnc.trim()) {
bdone=true;
alert('Congratulations on piecing back together ... ' + String.fromCharCode(10) + String.fromCharCode(10) + origsnc);
} else {
bdone=true;
alert('Bad luck not piecing back together ... ' + String.fromCharCode(10) + String.fromCharCode(10) + origsnc + String.fromCharCode(10) + String.fromCharCode(10) + " ... when you got ... " + String.fromCharCode(10) + String.fromCharCode(10) + workalert(document.getElementsByTagName('tab' + 'le')[1].innerText).trim());
}
location.href=document.URL;
}
}
}
function aathen() {
prefx='th';
if (document.getElementById('span0')) { prefx='span'; document.getElementById('dsource').style.display='none'; }
for (var kspan=0; kspan<eval('' + sourcenum); kspan++) {
//alert(document.getElementById(prefx + kspan).outerHTML);
if (prefx == 'span') {
document.getElementById(prefx + kspan).onclick=function(event) { lastoh=event.target.outerHTML; lastih='>' + event.target.innerHTML + '<'; };
}
document.getElementById(prefx + kspan).addEventListener("dragstart", (ev) => {
console.log("dragStart at " + document.URL);
sourceid='' + fit(ev.target).id;
// Change the source element's background color
// to show that drag has started
ev.currentTarget.classList.add("dragging");
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
// Set the drag's format and data.
// Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
//alert(ev.target.outerHTML);
});
document.getElementById(prefx + kspan).addEventListener("dragend", (ev) =>
ev.target.classList.remove("dragging")
);
}
//alert(spanstuff);
}
}
function bodyev() {
if (document.getElementById('clone').innerHTML.indexOf(' ...') == -1) {
document.getElementById('clone').innerHTML+=' ... Double click (or right click) where you want clone to be';
}
document.body.ondblclick=function(e) {
e = e || window.event;
e.preventDefault();
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;
}
if (clonedata.indexOf(' style="') != -1) {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(' style="', ' style="position:absolute;left:' + pos3 + 'px;top:' + pos4 + 'px;');
} else if (clonedata.indexOf(" style='") != -1) {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(" style='", " style='position:absolute;left:" + pos3 + "px;top:" + pos4 + "px;");
} else {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(' ', ' style="position:absolute;left:' + pos3 + 'px;top:' + pos4 + 'px;" ');
}
};
document.body.oncontextmenu=function(e) {
e = e || window.event;
e.preventDefault();
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;
}
if (clonedata.indexOf(' style="') != -1) {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(' style="', ' style="position:absolute;left:' + pos3 + 'px;top:' + pos4 + 'px;');
} else if (clonedata.indexOf(" style='") != -1) {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(" style='", " style='position:absolute;left:" + pos3 + "px;top:" + pos4 + "px;");
} else {
document.getElementById('scratchpad').innerHTML+=clonedata.replace(' ', ' style="position:absolute;left:' + pos3 + 'px;top:' + pos4 + 'px;" ');
}
};
}
function andlaterstill() {
if (document.URL.indexOf('/chess') == -1) {
if (tdid != '') {
//alert(8188);
document.getElementById(tdid).innerHTML=document.getElementById(tdid).innerHTML.substring(0,1);
} else if (document.getElementById('mytable').innerHTML.indexOf(clonedatatwo) != '') {
//alert(8288);
document.getElementById('target').innerHTML=document.getElementById('target').innerHTML.split('</ta' + 'ble>')[0] + '</ta' + 'ble>';
}
if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo) != -1) {
//alert(8388);
document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo,'');
} else if (document.getElementsByTagName('div')[0].innerHTML.indexOf(clonedatatwo.replace('dragging','')) != -1) {
//alert(8488);
document.getElementsByTagName('div')[0].innerHTML=document.getElementsByTagName('div')[0].innerHTML.replace(clonedatatwo.replace('dragging',''),'');
} else if (document.body.innerHTML.split('<ta' + 'ble')[0].indexOf(clonedatatwo.replace('dragging','')) != -1) {
//alert(8588);
document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('<ta' + 'ble')[0], document.body.innerHTML.split('<ta' + 'ble')[0].replace(clonedatatwo.replace('dragging',''),''));
} else if (document.body.innerHTML.split('<ta' + 'ble')[0].indexOf(clonedatatwo) != -1) {
//alert(8688);
document.body.innerHTML=document.body.innerHTML.replace(document.body.innerHTML.split('<ta' + 'ble')[0], document.body.innerHTML.split('<ta' + 'ble')[0].replace(clonedatatwo,''));
}
}
tdid='';
}
function andlater() {
var squares=document.getElementsByTagName('td');
for (var ii=1; ii<=tdnum; ii++) {
if (squares[eval(-1 + ii)].innerHTML.indexOf('<') != -1) {
tdid='' + squares[eval(-1 + ii)].id;
}
}
console.log('tdid=' + tdid);
setTimeout(andlaterstill, 100);
}
function scramble() {
if (!document.getElementById('callback')) {
var iso=0, sofar=',';
var squares=document.getElementsByTagName('td');
secs++;
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + ' seconds';
for (var ii=1; ii<=tdnum; ii++) {
iso=eval(1 + Math.min(eval(-1 + tdnum),Math.floor(Math.random() * tdnum)));
while (sofar.indexOf(',' + iso + ',') != -1) {
iso=eval(1 + Math.min(eval(-1 + tdnum),Math.floor(Math.random() * tdnum)));
}
squares[eval(-1 + ii)].innerHTML='' + iso + squares[eval(-1 + ii)].innerHTML.substring(1);
sofar+='' + iso + ',';
}
}
}
function scoreingame() {
if (!document.getElementById('callback')) { setInterval(scramble, 1000); }
}
//setTimeout(cloneize, 2000);
</script>
<style>
div {
margin: 0.5em 0;
padding: 2em;
}
#target,
#source {
border: 1px solid black;
padding: 0.5rem;
}
.dragging {
background-color: pink;
}
td {
border: 1px dotted green;
}
</style>
</head>
<body onload="if (1 == 1) { cloneize(); } score=(location.search.split('score=')[1] ? eval('' + decodeURIComponent(location.search.split('score=')[1].split('&')[0])) : 0); secs=(location.search.split('secs=')[1] ? eval('' + decodeURIComponent(location.search.split('secs=')[1].split('&')[0])) : 0); if (eval(score + secs) != 0) { document.getElementById('score').innerHTML='Score ' + score + '/' + secs; } ">
<h1>Experimental Drag and Drop <button id="mybut" onclick="scoreingame();">Game</button></h1>
<h3>RJM Programming <span id=spmore>-</span> July, 2023</h3>
<h3 id="score"></h3>
<h4>Thanks to <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData' href='//developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData'>https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData</a></h4>
<div id=dsource>
<p id="source" class="source" draggable="true" contenteditable="true" style="background-color:#f0f0f0;">
Select this <strong id=strongs>editable</strong> element, drag it to the drop zone and then release the selection
to move the element.
</p>
</div>
<div id="target">Drop Zone
<table style="width:90%;height:30%;" id="mytable">
<tr id=tr1><td id="td11">1</td><td id="td12">2</td><td id="td13">3</td></tr>
<tr id=tr2><td id="td21">4</td><td id="td22">5</td><td id="td23">6</td></tr>
<tr id=tr3><td id="td31">7</td><td id="td32">8</td><td id="td33">9</td></tr>
</table>
</div>
<button id="reset">Reset example</button> <button id="clone" style="display:none;" onclick="bodyev();">Clone content</button>
<div id=scratchpad></div>
<script type=text/javascript>
function aaathen() { //evtarget) {
// alert(lastevid);
// if (!document.getElementById(lastevid)) {
// if (document.getElementById(lastevid.replace('x',''))) {
// lastevid=lastevid.replace('x','');
// } else {
lastevid=lastevid.replace('th','span');
// }
// }
evtarget=document.getElementById(lastevid);
if (evtarget && document.getElementById('mytable').innerHTML.indexOf('</span>') != -1 && 1 == 7) {
console.log(' ... ' + evtarget.id);
if (document.getElementById('mytable').innerHTML.indexOf('</th>') != -1 || document.getElementById('mytable').innerHTML.indexOf('</span>') != -1) {
//alert('Here');
var hostevid=document.getElementById('mytable').innerHTML.split(evtarget.outerHTML)[0].split(' id="')[1].split('"')[0];
document.getElementById(hostevid).innerHTML=evtarget.outerHTML.replace(/th/g, 'span');
evtarget=document.getElementById(lastevid);
}
evtarget.setAttribute('draggable', true);
evtarget.addEventListener("dragstart", (ev) => {
console.log("dragStart At " + document.URL);
sourceid='' + fit(ev.target).id;
// Change the source element's background color
// to show that drag has started
ev.currentTarget.classList.add("dragging");
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
// Set the drag's format and data.
// Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
});
evtarget.addEventListener("dragend", (ev) =>
ev.target.classList.remove("dragging")
);
console.log(' .+. ' + evtarget.id);
}
}
function lastohit() {
var thtoundo='';
if (lastoh != '') {
if (prefx == 'span' && lastoh.indexOf('<span') != 0) { return ''; }
if (1 == 2 && document.getElementById('target').innerHTML.indexOf(lastoh.split('>')[0] + '>') != -1) { // && lastoh.substring(0,3) != '<th') { //document.getElementById('source').innerHTML.indexOf(lastoh.split('>')[0] + '>') == -1 && document.getElementById('source').innerHTML.indexOf(lastoh.replace('>', ' style="cursor: progress;">').split('>')[0] + '>') == -1) {
//alert('3:' + lastoh);
tdtoundo=document.getElementById('target').innerHTML.split(lastoh.split('>')[0] + '>')[0].split(' id="')[eval(-1 + document.getElementById('target').innerHTML.split(lastoh.split('>')[0] + '>')[0].split(' id="').length)].split('"')[0]
//if (lastoh.indexOf('<span') == 0) { document.getElementById(lastid).style.display='none'; }
lastevid=lastoh.split(' id="')[1].split('"')[0];
//document.getElementById(lastevid).style.visibility='hidden';
//alert('8788 ' + lastoh);
document.getElementById('target').innerHTML=document.getElementById('target').innerHTML.replace(lastih, '>' + lastoh.replace(' id="', ' id="x').replace(/th/g, 'span').replace(' dragXgable=', ' data-draggable=') + '<');
lastevid='x' + lastoh.split(' id="')[1].split('"')[0];
document.getElementById(tdtoundo).innerHTML='';
setTimeout(aaathen, 2000); //(document.getElementById(lastevid));
} else if (3 == 4 && document.getElementById('target').innerHTML.indexOf(lastoh.replace('>', ' style="cursor: progress;">').split('>')[0] + '>') != -1) { // && lastoh.substring(0,3) != '<th') { //document.getElementById('source').innerHTML.indexOf(lastoh.replace('>', ' style="cursor: progress;">').split('>')[0] + '>') == -1 && document.getElementById('source').innerHTML.indexOf(lastoh.split('>')[0] + '>') == -1) {
//alert('4:' + lastoh);
tdtoundo=document.getElementById('target').innerHTML.split(lastoh.replace('>', ' style="cursor: progress;">').split('>')[0] + '>')[0].split(' id="')[eval(-1 + document.getElementById('target').innerHTML.split(lastoh.replace('>', ' style="cursor: progress;">').split('>')[0] + '>')[0].split(' id="').length)].split('"')[0]
//if (lastoh.indexOf('<span') == 0) { document.getElementById(lastid).style.display='none'; }
lastevid=lastoh.split(' id="')[1].split('"')[0];
//document.getElementById(lastevid).style.visibility='hidden';
//alert('81788 ' + lastoh);
document.getElementById('target').innerHTML=document.getElementById('target').innerHTML.replace(lastih, '>' + lastoh.replace(' id="', ' id="x').replace(/th/g, 'span').replace(' dragXgable=', ' data-draggable=') + '<');
lastevid='x' + lastoh.split(' id="')[1].split('"')[0];
document.getElementById(tdtoundo).innerHTML='';
setTimeout(aaathen, 2000); //(document.getElementById(lastevid));
} else if (document.getElementById('target').innerHTML.indexOf(lastih) != -1 || document.getElementById('source').innerHTML.indexOf(lastoh) != -1) {
//alert('0:' + lastoh + ' ' + lastih);
lastevid=lastoh.split(' id="')[1].split('"')[0];
if (document.getElementById(lastevid) && lastoh.indexOf('<th') != 0) { // || lastoh.indexOf('<span') != 0)) {
if (prefx == 'th' && document.URL.indexOf('/chess') != -1) { document.getElementById(lastevid).style.visibility='hidden'; } //else { alert(lastoh + ' ... ' + document.getElementById('target').innerHTML.indexOf(lastih) + ' ... ' + document.getElementById('target').innerHTML.indexOf(lastoh) + ' ... ' + lastid); }
}
//document.getElementById('source').innerHTML=document.getElementById('source').innerHTML.replace(lastoh, '');
//alert(8788);
// document.getElementById('target').innerHTML=document.getElementById('target').innerHTML.replace(lastih, '>' + lastoh.replace(' id="', ' id="x').replace('<span ').replace(' dragXgable=', ' data-draggable=') + '<');
if (prefx == 'span') {
document.getElementById('target').innerHTML=document.getElementById('target').innerHTML.replace(lastoh, '');
document.getElementById(lastid).innerHTML=lastoh;
lastoh='';
lastih='';
} else {
lastevid='x' + lastoh.split(' id="')[1].split('"')[0];
setTimeout(aaathen, 2000); //(document.getElementById(lastevid));
}
} else if (document.getElementById('target').innerHTML.indexOf(lastih) != -1 || document.getElementById('source').innerHTML.indexOf(lastoh.replace('>', ' style="cursor: progress;">')) != -1) {
//alert('1:' + lastoh);
lastevid=lastoh.split(' id="')[1].split('"')[0];
if (document.getElementById(lastevid) && lastoh.indexOf('<th') != 0) { // || lastoh.indexOf('<span') != 0)) {
if (prefx == 'th' && document.URL.indexOf('/chess') != -1) { document.getElementById(lastevid).style.visibility='hidden'; }
}
//document.getElementById('source').innerHTML=document.getElementById('source').innerHTML.replace(lastoh.replace('>', ' style="cursor: progress;">'), '');
//alert(8888);
document.getElementById('target').innerHTML=document.getElementById('target').innerHTML.replace(lastih, '>' + lastoh.replace(' id="', ' id="x').replace(/th/g, 'span').replace(' dragXgable=', ' data-draggable=') + '<');
if (prefx == 'span') {
document.getElementById('target').innerHTML=document.getElementById('target').innerHTML.replace(lastoh, '');
document.getElementById(lastid).innerHTML=lastoh;
lastoh='';
lastih='';
} else {
lastevid='x' + lastoh.split(' id="')[1].split('"')[0];
setTimeout(aaathen, 2000); //(document.getElementById(lastevid));
}
} //else {
//alert('why ' + lastoh + ' not found');
//}
lastoh='';
lastih='';
} //else {
//alert('Oops ' + lastoh);
//}
}
function fit(evo) {
if (document.URL.indexOf('/chess') != -1) {
//alert('here at fit ' + evo.outerHTML);
console.log(evo.outerHTML);
lastoh=evo.outerHTML;
lastih='>' + evo.innerHTML + '<';
//alert(lastoh);
//if (document.getElementById('target').outerHTML.indexOf('>' + evo.innerHTML + '<') != -1) { alert('Re-move >' + evo.innerHTML + '<'); }
}
return evo;
}
const source = document.querySelector("#source");
if (document.URL.indexOf('traditional=') == -1) {
source.addEventListener("dragstart", (ev) => {
console.log("dragStart " + document.URL);
sourceid='' + fit(ev.target).id;
// Change the source element's background color
// to show that drag has started
ev.currentTarget.classList.add("dragging");
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
// Set the drag's format and data.
// Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
});
source.addEventListener("dragend", (ev) =>
ev.target.classList.remove("dragging")
);
}
const target = document.querySelector("#target");
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i) && ('' + source.outerHTML).indexOf('<p') == 0 && ('' + target.outerHTML).indexOf('<span') == -1 && ('' + target.outerHTML).indexOf('>Drop Zone') != -1 && document.body.innerHTML.indexOf('Numbe' + 'rs Guessi' + 'ng Ga' + 'me') != -1) {
target.innerHTML='<span id=sdropz>Drop Zone</span>' + target.outerHTML.split('>Drop Zone')[1].split('</div>')[0];
}
target.addEventListener("dragover", (ev) => {
if (lastbco) { lastbco.style.backgroundColor='white'; lastbco=null; }
//console.log("dragOver " + ev.target.id + ' ' + ('' + ev.target.style.backgroundColor).replace('white','') + ' ' + document.body.innerHTML.indexOf('tab' + 'lece' + 'llb' + 'c'));
ev.preventDefault();
if (('' + ev.target.id).indexOf('td') == 0 && ('' + ev.target.style.backgroundColor).trim().replace('white','') == '' && document.body.innerHTML.indexOf('Numbe' + 'rs Guessi' + 'ng Ga' + 'me') != -1) {
//document.getElementById(sourceid).style.opacity='0.6';
lastbco=ev.target;
ev.target.style.backgroundColor='pink';
if (document.getElementById('mybut')) {
if (document.getElementById('mybut').innerHTML.indexOf(' .. ') == -1) {
document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.replace(' Game Game', ' Game');
document.getElementById('mybut').innerHTML+=' .. current guess is ' + ev.target.innerHTML;
} else {
document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.split(' .. ')[0] + ' .. current guess is ' + ev.target.innerHTML;
}
}
if (document.getElementById('sdropz')) {
if (document.getElementById('sdropz').innerHTML.indexOf(' .. ') == -1) {
document.getElementById('sdropz').innerHTML+=' .. current guess is ' + ev.target.innerHTML;
} else {
document.getElementById('sdropz').innerHTML=document.getElementById('sdropz').innerHTML.split(' .. ')[0] + ' .. current guess is ' + ev.target.innerHTML;
}
}
}
//document.getElementById(sourceid).style.cursor='progress';
//ev.target.style.cursor='progress';
//ev.target.dataTransfer.dropEffect = 'progress';
});
target.addEventListener("drop", (ev) => {
console.log("Drop");
ev.preventDefault();
// Get the data, which is the id of the source element
const data = ev.dataTransfer.getData("text");
const source = document.getElementById(data);
console.log('' + ev.target.id);
if (!document.getElementById('callback')) {
lastevid=ev.target.id;
//alert(lastevid);
//ev.target.setAttribute('draggable', true);
if (lastoh == '') {
//alert('suspicious ' + document.getElementById(sourceid).outerHTML);
lastoh=ev.target.outerHTML;
lastih='>' + ev.target.innerHTML + '<';
lastid=ev.target.id;
} else if (prefx == 'span') {
lastid=ev.target.id;
}
setTimeout(lastohit, 1000);
if (('' + ev.target.style.backgroundColor).indexOf(',0.6') != -1 || ('' + ev.target.style.backgroundColor).indexOf(',0.5') != -1) {
//alert('564 ' + ev.target.getAttribute('data-square'));
ev.target.style.filter='invert(1)';
ev.target.style.backgroundColor='rgba(255,255,255,0.6)';
}
if (('' + ev.target.id).substring(0,2) == 'td' && secs > 0 && document.URL.indexOf('/planet_') == -1) {
score+=eval(ev.target.innerHTML.substring(0,1));
}
} else if (document.getElementById('callback')) {
secs++;
if (('' + ev.target.getAttribute('data-answer')) == ('' + document.getElementById('source').getAttribute('data-answer')) || ('' + ev.target.getAttribute('data-answer')) == ('' + document.getElementById(sourceid).getAttribute('data-answer'))) {
score++;
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + secs + '';
if (document.getElementById('source').outerHTML.indexOf('<ta' + 'ble') == 0) {
alert(('Correct answer was ' + document.getElementById(sourceid).getAttribute('data-answer')).replace('null',''));
} else {
alert(('Correct answer was ' + document.getElementById('source').getAttribute('data-answer')).replace('null',''));
}
}
location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + secs;
}
if (1 == 2) {
clonedatatwo=document.getElementById(sourceid).outerHTML;
document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, '');
ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo;
} else if (secs > 0 && (9 == 9 || ('' + ev.target.id).substring(0,2) == 'td')) {
if (source) { source.style.cursor='progress'; }
clonedatatwo=document.getElementById(sourceid).outerHTML;
andlater();
//document.getElementById('mytable').innerHTML=document.getElementById('mytable').innerHTML.replace(clonedatatwo, '');
//ev.target.innerHTML=ev.target.innerHTML.substring(0,1) + clonedatatwo;
//document.getElementById('target').appendChild(source);
if (('' + ev.target.id).substring(0,2) != 'td') {
document.getElementById('target').insertAdjacentHTML('beforeend', clonedatatwo);
} else {
if (source) { source.style.cursor='progress'; }
ev.target.insertAdjacentHTML('beforeend', clonedatatwo);
}
} else {
ev.target.appendChild(source);
}
if (ev.touches) {
if (ev.touches[0].pageX) {
pos3 = ev.touches[0].pageX;
pos4 = ev.touches[0].pageY;
} else {
pos3 = ev.touches[0].clientX;
pos4 = ev.touches[0].clientY;
}
console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);
} else if (ev.clientX || ev.clientY) {
pos3 = ev.clientX;
pos4 = ev.clientY;
console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);
} else {
pos3 = ev.pageX;
pos4 = ev.pageY;
console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);
}
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
</script>
<style>
@media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: portrait) {
#target { text-shadow:-1px 1px 1px #ff2d95; }
td[data-answer*="THE "] {
font-size: 10px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: landscape) {
#target { text-shadow:-1px 1px 1px #ff2d95; }
td[data-answer*="THE "] {
font-size: 10px;
}
}
}
</style>
</body>
</html>