- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Drag &drop div con coordinate
-
Drag &drop div con coordinate
Ciao ragazzi,
ho fatto questo codice ed è tutto funzionante, ma solo quando sposto il div
con drag & drop dopo lo spostamento devo clikkarci di nuovo sopra per avere le nuove coordinate aggiornate nei form!
Senno dopo 2 secondi dalla fine del drag, i form mandano le coordinate allo stesso file e il div torna alla posizione di prima, perchè non sono aggiornati i form.
Come posso fare, per avere le coordinate già aggiornate alla fine del drag senza riclikkarci sopra?P.S.: Quando inizia il drag si aggiorna con le vecchie coordinate, ma quando finisce restano sempre quelle, ecco postato in basso tutto il codice, è una pagina php!
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .box { background-color: #ffff00; border: 1px solid #000000; color:; padding: 0px; position: absolute; } .bar { background-color: #008080; color: #ffffff; cursor: move; font-weight: bold; padding: 2px 1em 2px 1em; } .content { padding: 1em; } </style> <script type="text/javascript">//<![CDATA[ function Browser() { var ua, s, i; this.isIE = false; this.isNS = false; this.version = null; ua = navigator.userAgent; s = "MSIE"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; this.version = parseFloat(ua.substr(i + s.length)); return; } s = "Netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = parseFloat(ua.substr(i + s.length)); return; } // Treat any other "Gecko" browser as NS 6.1. s = "Gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = 6.1; return; } } var browser = new Browser(); // Global object to hold drag information. var dragObj = new Object(); dragObj.zIndex = 0; function dragStart(event, id) { var el; var x, y; // If an element id was given, find it. Otherwise use the element being // clicked on. if (id) dragObj.elNode = document.getElementById(id); else { if (browser.isIE) dragObj.elNode = window.event.srcElement; if (browser.isNS) dragObj.elNode = event.target; // If this is a text node, use its parent element. if (dragObj.elNode.nodeType == 3) dragObj.elNode = dragObj.elNode.parentNode; } // Get cursor position with respect to the page. if (browser.isIE) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (browser.isNS) { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } // Save starting positions of cursor and element. dragObj.cursorStartX = x; dragObj.cursorStartY = y; dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10); dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10); if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0; if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0; // Update element's z-index. dragObj.elNode.style.zIndex = ++dragObj.zIndex; // Capture mousemove and mouseup events on the page. if (browser.isIE) { document.attachEvent("onmousemove", dragGo); document.attachEvent("onmouseup", dragStop); window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) { document.addEventListener("mousemove", dragGo, true); document.addEventListener("mouseup", dragStop, true); event.preventDefault(); } } function dragGo(event) { var x, y; document.getElementById('xr').value = dragObj.elStartLeft; document.getElementById('yr').value = dragObj.elStartTop; // Get cursor position with respect to the page. if (browser.isIE) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (browser.isNS) { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } // Move drag element by the same amount the cursor has moved. dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px"; dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px"; if (browser.isIE) { window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) event.preventDefault(); } function dragStop(event) { // Stop capturing mousemove and mouseup events. if (browser.isIE) { document.detachEvent("onmousemove", dragGo); document.detachEvent("onmouseup", dragStop); } if (browser.isNS) { document.removeEventListener("mousemove", dragGo, true); document.removeEventListener("mouseup", dragStop, true); } } //]]></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #99CC00; background-color: #333333; letter-spacing: 2px; text-align: center; word-spacing: 5px; display: block; padding: 5px; height: auto; width: auto; margin: 10px; border: 1px solid #FFFFFF; } .content { background-color: #0066FF; border: 1px dashed; margin: 5px; padding: 5px; } .main { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-indent: 10pt; } .float-right { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:; background-color: #FFFFFF; float: right; position: relative; border: 1px solid; margin: auto 5px auto auto; height: 40px; width: 100px; text-indent: 0pt; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: bold; color: #DDDDDD; background-color: #0F6FFF; display: block; padding: 2px; font-variant: small-caps; text-transform: none; font-style: oblique; letter-spacing: 3px; } .code { font-family: "Courier New", Courier, mono; font-size: 12px; background-color: #DDDDEE; text-indent: 0pt; display: block; margin: 10px; padding: 2px; border: 1px solid; color:; } code { font-family: "Courier New", Courier, mono; font-size: 12px; color: #888888; } .monkey { background: #ff0000; width: 200px; height: 200px; } a { color: #FFCC00; } .real_monkey { background: #FF0000; width: 100px; height: 100px; position: absolute; z-index: 5; } h3 { font-size: 16px; font-weight: bold; clear: both; } --> </style> <script language="javascript"> var x; var y; var element; var being_dragged = false; function mouser(event){ if(event.offsetX || event.offsetY) { x=event.offsetX; y=event.offsetY; } else { x=event.pageX; y=event.pageY; } if(being_dragged == true) { document.getElementById(element).style.left = x +'px'; document.getElementById(element).style.top = y +'px'; } } function mouse_down(ele_name) { being_dragged = false; element = ele_name; document.getElementById(element).style.cursor = 'auto'; } function mouse_up() { being_dragged = false; document.getElementById(element).style.top = y +'px'; document.getElementById(element).style.left = x +'px'; document.getElementById(element).style.cursor = 'auto'; } function inizializza() { document.getElementById('xr').value = dragObj.elStartLeft; document.getElementById('yr').value = dragObj.elStartTop; } function inizializza2() { document.getElementById('xr').value = dragObj.elStartLeft; document.getElementById('yr').value = dragObj.elStartTop; setTimeout("document.myform.submit()", 2000); } </script> </script> </head> <body class="main" onmouseup="inizializza2();" onmousedown="inizializza();"> <div id="boxA" class="box content" style="left: <?php echo("$_GET"); ?> ;top: <?php echo("$_GET"); ?> ;width:586px; position:absolute; height:460px" onmousedown="dragStart(event)"> This is Box A, drag it. </div> <form name="myform" id="myform" method=get action=client01.php> <input type="text" id="xr" name="xr"> <input type="text" id="yr" name="yr"> </form> </body> </html> ```Grazie in anticipo!
-
grazie, non fa niente ho già risolto da solo! E' da 2 giorni che ho postato ed ho cercato di lavorarci su, bastava mettere nella funzione inizializza() all'inizio le righe di estrapolazione delle variabili che sono:
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10); dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
ciao, :iop :iop