title: JQuery-UI-sortable with Absolute Positioning and margin-left
body: <p>I'm trying to use jQuery-ui-sortable to allow a user to custom sort a hand of cards.  The HTML that I am trying to allow them to sort has div elements that are absolutely positioned, have margin-left styles, and are overlapping.</p>
  
  <p>My problem is that when I make my container element sortable, I am able to click and drag the individual cards, but when I release the mouse button, the card snaps back to its original position.  </p>
  
  <p>As the user's hand is backed by an Array, I don't NEED sortable to actually drop the card in its new position, although it would be a nice-to-have so I don't have to redraw the hand.  All that is needed is to get the index that the helper/placeholder is hovering over when the mouse button is released.  I've tried a variety of ways of getting this as well, but I've been getting the inital index + 1 in the console.  </p>
  
  <p>Here is a fiddle with my code:
  <a href="http://jsfiddle.net/rcMwq/4/" rel="nofollow">http://jsfiddle.net/rcMwq/4/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="bottomhand ui-sortable"&gt;
      &lt;div class="mycard" style="margin-left: 0em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front"&gt;
                  &lt;div class="index"&gt;3
                      &lt;br&gt;♠&lt;/div&gt;
                  &lt;div class="spotB1"&gt;♠&lt;/div&gt;
                  &lt;div class="spotB3"&gt;♠&lt;/div&gt;
                  &lt;div class="spotB5"&gt;♠&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;3
                      &lt;br&gt;♠&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 1.5em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front red"&gt;
                  &lt;div class="index"&gt;4
                      &lt;br&gt;♦&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♦&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♦&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;4
                      &lt;br&gt;♦&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 3em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front red"&gt;
                  &lt;div class="index"&gt;7
                      &lt;br&gt;♥&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♥&lt;/div&gt;
                  &lt;div class="spotA3"&gt;♥&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♥&lt;/div&gt;
                  &lt;div class="spotB2"&gt;♥&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♥&lt;/div&gt;
                  &lt;div class="spotC3"&gt;♥&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♥&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;7
                      &lt;br&gt;♥&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 4.5em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front"&gt;
                  &lt;div class="index"&gt;10
                      &lt;br&gt;♠&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♠&lt;/div&gt;
                  &lt;div class="spotA2"&gt;♠&lt;/div&gt;
                  &lt;div class="spotA4"&gt;♠&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♠&lt;/div&gt;
                  &lt;div class="spotB2"&gt;♠&lt;/div&gt;
                  &lt;div class="spotB4"&gt;♠&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♠&lt;/div&gt;
                  &lt;div class="spotC2"&gt;♠&lt;/div&gt;
                  &lt;div class="spotC4"&gt;♠&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♠&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;10
                      &lt;br&gt;♠&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 6em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front red"&gt;
                  &lt;div class="index"&gt;3
                      &lt;br&gt;♥&lt;/div&gt;
                  &lt;div class="spotB1"&gt;♥&lt;/div&gt;
                  &lt;div class="spotB3"&gt;♥&lt;/div&gt;
                  &lt;div class="spotB5"&gt;♥&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;3
                      &lt;br&gt;♥&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 7.5em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front"&gt;
                  &lt;div class="index"&gt;A
                      &lt;br&gt;♣&lt;/div&gt;
                  &lt;div class="ace"&gt;♣&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;A
                      &lt;br&gt;♣&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 9em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front red"&gt;
                  &lt;div class="index"&gt;6
                      &lt;br&gt;♦&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♦&lt;/div&gt;
                  &lt;div class="spotA3"&gt;♦&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC3"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♦&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;6
                      &lt;br&gt;♦&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 10.5em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front"&gt;
                  &lt;div class="index"&gt;6
                      &lt;br&gt;♠&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♠&lt;/div&gt;
                  &lt;div class="spotA3"&gt;♠&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♠&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♠&lt;/div&gt;
                  &lt;div class="spotC3"&gt;♠&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♠&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;6
                      &lt;br&gt;♠&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 12em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front red"&gt;
                  &lt;div class="index"&gt;5
                      &lt;br&gt;♥&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♥&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♥&lt;/div&gt;
                  &lt;div class="spotB3"&gt;♥&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♥&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♥&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;5
                      &lt;br&gt;♥&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 13.5em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front"&gt;
                  &lt;div class="index"&gt;5
                      &lt;br&gt;♣&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♣&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♣&lt;/div&gt;
                  &lt;div class="spotB3"&gt;♣&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♣&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♣&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;5
                      &lt;br&gt;♣&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 15em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front red"&gt;
                  &lt;div class="index"&gt;5
                      &lt;br&gt;♦&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♦&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♦&lt;/div&gt;
                  &lt;div class="spotB3"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♦&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;5
                      &lt;br&gt;♦&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 16.5em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front"&gt;
                  &lt;div class="index"&gt;8
                      &lt;br&gt;♣&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♣&lt;/div&gt;
                  &lt;div class="spotA3"&gt;♣&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♣&lt;/div&gt;
                  &lt;div class="spotB2"&gt;♣&lt;/div&gt;
                  &lt;div class="spotB4"&gt;♣&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♣&lt;/div&gt;
                  &lt;div class="spotC3"&gt;♣&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♣&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;8
                      &lt;br&gt;♣&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mycard" style="margin-left: 18em"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front red"&gt;
                  &lt;div class="index"&gt;8
                      &lt;br&gt;♦&lt;/div&gt;
                  &lt;div class="spotA1"&gt;♦&lt;/div&gt;
                  &lt;div class="spotA3"&gt;♦&lt;/div&gt;
                  &lt;div class="spotA5"&gt;♦&lt;/div&gt;
                  &lt;div class="spotB2"&gt;♦&lt;/div&gt;
                  &lt;div class="spotB4"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC1"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC3"&gt;♦&lt;/div&gt;
                  &lt;div class="spotC5"&gt;♦&lt;/div&gt;
                  &lt;div class="bottomindex"&gt;8
                      &lt;br&gt;♦&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bottomhand {
      position: absolute;
      margin-left: -12.75em;
      left: 50%;
      width: 19.50em;
      height: 6.00em;
      bottom: 6.00em;
  }
  .card {
      background-image: url("../images/cardback.png");
      background-size: cover;
      border-color: #808080 #000000 #000000 #808080;
      border-width: 1px;
      border-style: solid;
      position: absolute;
      width: 3.75em;
      height: 5.00em;
      cursor: default;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  .front {
      background-color: #ffffff;
      color: #000000;
      position: absolute;
      width: 100%;
      height: 100%;
  }
  .red {
      color: #ff0000;
  }
  .index {
      font-size: 63%;
      font-weight: bold;
      text-align: center;
      position: absolute;
      left: 0.15em;
      top: 0.15em;
  }
  .bottomindex {
      font-size: 63%;
      font-weight: bold;
      text-align: center;
      position: absolute;
      right: 0.15em;
      bottom: 0.15em;
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
  }
  .ace {
      font-size: 300%;
      position: absolute;
      left: 0.325em;
      top: 0.250em;
  }
  .spotA1 {
      position: absolute;
      left: 0.60em;
      top: 0.5em;
  }
  .spotA2 {
      position: absolute;
      left: 0.60em;
      top: 1.5em;
  }
  .spotA3 {
      position: absolute;
      left: 0.60em;
      top: 2.0em;
  }
  .spotA4 {
      position: absolute;
      left: 0.60em;
      top: 2.5em;
  }
  .spotA5 {
      position: absolute;
      left: 0.60em;
      top: 3.5em;
  }
  .spotB1 {
      position: absolute;
      left: 1.55em;
      top: 0.5em;
  }
  .spotB2 {
      position: absolute;
      left: 1.55em;
      top: 1.0em;
  }
  .spotB3 {
      position: absolute;
      left: 1.55em;
      top: 2.0em;
  }
  .spotB4 {
      position: absolute;
      left: 1.55em;
      top: 3.0em;
  }
  .spotB5 {
      position: absolute;
      left: 1.55em;
      top: 3.5em;
  }
  .spotC1 {
      position: absolute;
      left: 2.50em;
      top: 0.5em;
  }
  .spotC2 {
      position: absolute;
      left: 2.50em;
      top: 1.5em;
  }
  .spotC3 {
      position: absolute;
      left: 2.50em;
      top: 2.0em;
  }
  .spotC4 {
      position: absolute;
      left: 2.50em;
      top: 2.5em;
  }
  .spotC5 {
      position: absolute;
      left: 2.50em;
      top: 3.5em;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.bottomhand').sortable({
      items: "&gt; .mycard",
      tolerance: "pointer",
      start: function (event, ui) {
          ui.item.startPos = ui.item.index();
      },
      deactivate: function (event, ui) {
          console.log("deactivate Start position: " + ui.item.startPos);
          console.log("placeholder: " + ui.placeholder.index());
      },
      change: function (event, ui) {
          console.log("change Start position: " + ui.item.startPos);
          console.log("change helper position: " + ui.helper.index());
          console.log("placeholder: " + ui.placeholder.index());
      },
      beforeStop: function (event, ui) {
          console.log("Before Start position: " + ui.item.startPos);
          console.log("Before helper position: " + ui.helper.index());
          console.log("placeholder: " + ui.placeholder.index());
      },
      stop: function (event, ui) {
          console.log("After Start position: " + ui.item.startPos);
          //console.log("After helper position: " + ui.helper.index());
          console.log("placeholder: " + ui.placeholder.index());
      }
  });
  $('.bottomhand').disableSelection();
  </code></pre>