…cerca di imparare dalle modifiche che ho fatto però!codice:<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Draggable objects</title> <script type="text/javascript"> var oDragging, nMouseX, nMouseY, nStartX, nStartY, bDragStop = true, nZFocus = 99 /* lo z-Index maggiore presente nella pagina piu' uno! */, sDnDPref = "dr-drp_"; function dragDown(oPssEvt1) { var oMsEvent1 = oPssEvt1 || /* IE */ window.event; for (var bExit = true, iNode = oMsEvent1.target; iNode; iNode = iNode.parentNode) { if (iNode.className === "draggable") { bExit = false; oDragging = iNode; break; } } if (bExit) { return; } bDragStop = false; nStartX = nStartY = 0; for (var iOffPar = oDragging; iOffPar; iOffPar = iOffPar.offsetParent) { nStartX += iOffPar.offsetLeft; nStartY += iOffPar.offsetTop; } nMouseX = oMsEvent1.clientX; nMouseY = oMsEvent1.clientY; oDragging.style.zIndex = nZFocus++; return false; } function dragMove(oPssEvt2) { if (bDragStop) { return; } var oMsEvent2 = oPssEvt2 || /* IE */ window.event; oDragging.style.left = String(nStartX + oMsEvent2.clientX - nMouseX) + "px"; oDragging.style.top = String(nStartY + oMsEvent2.clientY - nMouseY) + "px"; } function dragUp() { if (!bDragStop && oDragging.id) { document.cookie = escape(sDnDPref + oDragging.id) + "=" + escape(oDragging.style.left + "/" + oDragging.style.top + "/block/" + oDragging.style.zIndex) + "; path=/"; } bDragStop = true; } function dragShow(sToShowId) { var oToShow = document.getElementById(sToShowId) oToShow.style.display = "block"; oToShow.style.zIndex = nZFocus++; document.cookie = escape(sDnDPref + sToShowId) + "=" + escape(oToShow.style.left + "/" + oToShow.style.top + "/block/" + oToShow.style.zIndex) + "; path=/"; } function dragHide(sToHideId) { var oToHide = document.getElementById(sToHideId); oToHide.style.display = "none"; document.cookie = escape(sDnDPref + sToHideId) + "=" + escape(oToHide.style.left + "/" + oToHide.style.top + "/none/" + oToHide.style.zIndex) + "; path=/"; } function dragReset() { for (var iCookie, oToSet, aVals, nNewZ, iCouple, iIdx = 0, aCookies = document.cookie.split(/;\s?/); iIdx < aCookies.length; iIdx++) { iCouple = aCookies[iIdx].split("="); if (iCouple.length < 2) { continue; } iCookie = unescape(iCouple[0]); if (iCookie.indexOf(sDnDPref) !== 0) { continue; } oToSet = document.getElementById(iCookie.slice(sDnDPref.length)); if (!oToSet) { continue; } aVals = unescape(iCouple[1]).split("/"); if (aVals.length > 0) { oToSet.style.left = aVals[0]; oToSet.style.top = aVals[1]; oToSet.style.display = aVals[2]; oToSet.style.zIndex = aVals[3]; nNewZ = parseFloat(aVals[3]); if (nNewZ >= nZFocus) { nZFocus = nNewZ + 1; } } } } document.onmousedown = dragDown; document.onmousemove = dragMove; document.onmouseup = dragUp; document.onkeypress = keyListener; window.onload = dragReset; function keyListener(oPssEvt3) { var oKeyEvt1 = oPssEvt3 || /* IE */ window.event; if (oKeyEvt1.ctrlKey && oKeyEvt1.charCode === 109) { /* ctrl + m */ dragShow("votazione"); } else if (oKeyEvt1.ctrlKey && oKeyEvt1.charCode === 122) { /* ctrl + z */ dragHide("votazione"); } } </script> <style type="text/css"> .draggable { position: fixed; left: 0; top: 0; width: auto; height: auto; cursor: move; z-index: 98; /* questo puoi anche eliminarlo, era solo per farti capire... ;-) */ } #votazione { width: 300px; height: 200px; left: 200px; top: 200px; background-color: #aaaaaa; display: none; } </style> </head> <body> Votazione: premi ctrl + m per aprire e ctrl + z per chiudere!!</p> <div class="draggable" id="votazione"> Div votazione!</p> </div> <div class="draggable" id="altroDiv" style="background-color:#ccaa77;width:450px;height:200px;left:200px;top:200px;display:none;"> Un altro Div!!</p> <span style="cursor:pointer;text-decoration:underline;color:#0000ff;" onclick="dragHide('altroDiv');">Chiudi</span></p> </div> <span style="cursor:pointer;text-decoration:underline;color:#0000ff;" onclick="dragShow('altroDiv');">Apri altro div!!</span></p> </body> </html>![]()
![]()