title: Object that is being dragged runs away
body: <p>Alright, What i'm trying to achieve is an <code>SVG</code> with inside it an <code>foreighObjects</code> that can move.</p>
  
  <p>I've made it possible to move ( draggable ), and the collission calculation looks alright to. There's only 1 problem. When i'm moving the object, it just spacing. It just runs out of the screen.</p>
  
  <p>Here's some HTML</p>
  
  <pre><code>&lt;div id="canvas"&gt;
      &lt;svg id="bewaar_holder" xmlns="http://www.w3.org/2000/svg" width="800" height="500" &gt;&lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the JS:</p>
  
  <pre><code>var kist_width = 60;
  var kist_width_real = 62; // Dat is met alle margin's en borders erbij op
  
  var kist_height = 60;
  var kist_height_real = 62; // Dat is met alle margin's en border erbij op
  
  var row_counter = 1;
  
  
  function makeNew(){
      var direction = $('input[name=direction]:checked').val();
      var name = $("#input_row_name").val();
      var length = $("#input_row_length").val();
      var height = $("#input_row_high").val();
  
      switch(direction){
          case 'lr':
              var leHTML = '&lt;foreignObject id="foreign_row_' + row_counter + '" class="node obstacle foreign_drag" x="' + (10) + '" y="' + (10 ) + '" width="' + (( kist_width_real * length ) + kist_width_real ) + '" height="' + (kist_height + 2) + '"&gt;&lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;';
              leHTML += '&lt;div class="row_holder_lr draggable_row" id="row_' + row_counter + '" &gt;&lt;div class="name_holder" &gt;' + name + '&lt;/div&gt;';
              leHTML += makeLR(length, height);
              break;
          default:
              alert("Er is een fout opgetreden waardoor de actie niet kon worden voltooid.");
              break;
      }
  
      leHTML += '&lt;/div&gt;&lt;/body&gt;&lt;/foreignObject&gt;';
      document.getElementById('bewaar_holder').appendChild(parseSVG(leHTML));
      makeDraggable(row_counter);
      row_counter++;
  }
  
  function makeLR(length, height){
      var add = "";
      var counter = 1;
      while(counter &lt;= length){
          add += '&lt;div class="kist"&gt;';
          add += '&lt;sup&gt;' + counter + '&lt;/sup&gt;';
          add += '&lt;span&gt;' + height + '&lt;/span&gt;';
          add += '&lt;/div&gt;';
          counter++;
      }
  
      return add;
  }
  
  /*
   * 
   * Alle drag acties:
   *
   */
  
  $('body').on('drag', '.draggable_row', function() {
      var elem_row = this;
      var id = $(elem_row).attr('id');
      id = id.replace("row_", "");
  
      log("dragging row " + id);
  
      var move_left = $(elem_row).css('left').replace(/[^-\d\.]/g, '');
      var move_top = $(elem_row).css('top').replace(/[^-\d\.]/g, '');
  
      if(parseInt(move_left) &gt; 0 || parseInt(move_top) &gt; 0){
          var elem_foreign = $("#foreign_row_" + id);
  
          var x1_cur = parseInt($(elem_foreign).attr('x')) + parseInt(move_left);
          var x2_cur = (x1_cur + (parseInt($(elem_foreign).attr("width"))));
          var y1_cur = parseInt($(elem_foreign).attr('y')) + parseInt(move_top);
          var y2_cur = (y1_cur + (parseInt($(elem_foreign).attr("height"))));
  
          $(elem_row).css('left', "0");
          $(elem_row).css('top', "0");
  
          if(!mayMove(id, x1_cur, x2_cur, y1_cur, y2_cur)){
              log("may not move object...");
              return false;
          }
  
          $(elem_foreign).attr('x', x1_cur);
          $(elem_foreign).attr('y', y1_cur);
          log("we just moved");
          // return false;
      }
  
  });
  
  function mayMove(id_cur, x1_cur, x2_cur, y1_cur, y2_cur){
      var returnVal = true;
      $('.obstacle').each(function(i, obj) {      // Loop trough all objects
          if($(obj).attr("id") != "foreign_row_" + id_cur){   // Ignore the dragging ( own ) object
              var x1_obj = parseInt($(obj).attr('x'));
              var x2_obj = (x1_obj + (parseInt($(obj).attr("width"))));
              var y1_obj = parseInt($(obj).attr('y'));
              var y2_obj = (y1_obj + (parseInt($(obj).attr("height"))));
  
              var minX1 = Math.min(x1_obj, x1_cur);
              var maxX1 = Math.max(x1_obj, x1_cur);
              var minX2 = Math.min(x2_obj, x2_cur);
              var maxX2 = Math.max(x2_obj, x2_cur); 
  
              if( maxX2 &lt;= minX1 || minX2 &gt;= maxX1 ){
                  log("overlapping with row_" + id_cur);
                  returnVal = false;
              }
          }
      });
      return returnVal;
  }
  
  function makeDraggable(id){
      $("#row_" + id).draggable({ 
          // grid: [ 40, 40 ]
      });
  }
  
  function parseSVG(s) {
      var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
      div.innerHTML= '&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;'+s+'&lt;/svg&gt;';
      var frag= document.createDocumentFragment();
      while (div.firstChild.firstChild)
          frag.appendChild(div.firstChild.firstChild);
      return frag;
  }
  </code></pre>
  
  <p>Here's an <a href="http://www.weallprogram.nl/bewaar.zip" rel="nofollow">zip file</a> with all the needed files. I tried to make an JSFiddle of it, but somehow that didn't work.</p>
  
  <p>So basicly what's happening is that an user clicks on an button and that the function <code>makeNew</code> is called. That makes an new svg element and put's it inside the svg. Then there's an <code>draggable</code> call on the div ( it didn't work on the svg ).  </p>
  
  <p>Every time the div is being dragged, we could use the margin to add it to the <code>foreignObject x and y coordinates</code> and empty the left and top of the div again.</p>
  
  <p>Problem is that how more you move, the faster it will run away ( i doesn't stick with the mouse ).</p>
  
  <p>So can anybody see the bug in this piece of code? I've been banging my head to the walls for hours...</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>After a lot of more debugging i came to the realization that the <code>$('body').on('drag'</code> is executed on every movement ( witch is good ). And the coordinates of the <code>foreignObject</code> are updated "correct". It's just that the css of the elements ( the <code>left and top values</code> ) aren't updated. When i manually execute the command (<code>$(elem_row).css('left', "0px");</code>) the values are updated. So that is the problem.</p>
  
  <p>So it looks like some kind of <code>async</code> "bug" ( not an real bug, but the setup of this piece of code make's it looks like it's an bug ) that the CSS isn't updated properly. </p>
  
  <p>Only problem now... I don't know how to fix that. Do you guys got any thoughts?</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I've placed the code on an hosting of my, so you guys can see it without needing to download everything. <a href="http://www.weallprogram.nl/bewaar/" rel="nofollow">The website</a></p>