• F
    Bannato User Attivo •

    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!
    0
  • F
    Bannato User Attivo •

    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

    0
Effettua l'accesso per rispondere