» Drag &drop div con coordinate

frank92 · 02-01-10, 15:24

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!

Codice:

<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: #000000;
  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 #000000;
    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: #333333;
    background-color: #FFFFFF;
    float: right;
    position: relative;
    border: 1px solid #333333;
    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 #000000;
    color: #333333;
}
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[xr]"); 
?>
;top:
<?php 
echo("$_GET[yr]"); 
?>
;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!

frank92 · 04-01-10, 13:00

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:

Codice:

  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

ciao, :iop :iop

02-01-10, 15:24	#1 (permalink)
frank92 Banned Data di registrazione: Mar 2009 Messaggi: 126	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! Codice: <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: #000000; 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 #000000; 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: #333333; background-color: #FFFFFF; float: right; position: relative; border: 1px solid #333333; 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 #000000; color: #333333; } 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[xr]"); ?> ;top: <?php echo("$_GET[yr]"); ?> ;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!
	Ultima modifica di frank92 : 02-01-10 15:29.

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

04-01-10, 13:00	#2 (permalink)
frank92 Banned Data di registrazione: Mar 2009 Messaggi: 126	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: Codice: dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10); dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10); ciao, :iop :iop

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email