• 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!

  • 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