title: change div id on drop with jquery
body: <p>I have a bit of code that lets me drag and drop elements. The problem is that i don't know how to change the id of the element when it's dropped. It needs to stay a list with the right numbers.</p>
  
  <p>
   </p>
  
  <pre><code>&lt;div class="container"&gt;     
  
      &lt;div class="block"&gt;
          &lt;div id="draggables"&gt;
              &lt;div id="dragbox1" class="stepbox"&gt;
                  &lt;label&gt;Step 1&lt;/label&gt;
                  &lt;input type='text' placeholder="Omschrijving" name="textbox1"&gt;
              &lt;/div&gt;
              &lt;div id="dragbox2" class="stepbox"&gt;
                  &lt;label&gt;Step 2&lt;/label&gt;
                  &lt;input type='text' placeholder="Omschrijving" name="textbox2"&gt;
              &lt;/div&gt;
              &lt;div id="dragbox3" class="stepbox"&gt;
                  &lt;label&gt;Step 3&lt;/label&gt;
                  &lt;input type='text' placeholder="Omschrijving" name="textbox3"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>When i drag a div (for example the div with id dragbox1 down under the div with id dragbox3) i want the jquery to rename the div id's so that it stays in the same order from 1,2,3 and not 2,3,1.</p>
  
  <p>I'm thinking it should be sometging like the folowing:</p>
  
  <pre><code>var divClass = /*div class name*/;
  var divId = /*static div id name*/;
  
  var checkDivOrder = function(){
          if(/*check for divs with the name of the divClass*/) {
              if (divId === /*static div id name*/) {
              divId = /*divIdName*/ + 1;
          } else {
              divId = /*divIdName*/ + /*previous div id number*/ + 1;
          }
      }
  };
  
  //recall function
  if(/*div being dropped*/){
      checkDivOrder(/*prev div number + 1*/);
  }
  </code></pre>
  
  <p>Could someone help me with this as my jquery and javascript skills are not that great.</p>