无法将div动画到所需位置两次

Question

I have 8 divs which I can swap based on the values given in the respective drop down, As you can be seen in the image below:

However the animation is not working for the same div twice, as you can see in this jsfiddle . Say if I swap div 1 with div 4 and then I try swapping new div 1 with div 7, the div is animating bizzarely all over the page! Tried debugging it with firebug, all the values for animating were correct and the flow was also perfect. Still its causing this problem. Don't know whether I am missing something about the animate() method!! This is my HTML code :

<table cellspacing="30">
  <tr>
    <td>
        <div id="img1" style="width:100px;height:40px;position:relative;">
            <select id="drop1" name="" class="drop">
                <option>1</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner1">
        </div>
    </td>
    <td>
        <div id="img2" style="width:100px;height:40px;position:relative;">
            <select id="drop2" name="" class="drop">
                <option>2</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner2">
        </div>
    </td>
    <td>
        <div id="img3" style="width:100px;height:40px;position:relative;">
            <select id="drop3" name="" class="drop">
                <option>3</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner3">
        </div>
    </td>
    <td>
        <div id="img4" style="width:100px;height:40px;position:relative;">
            <select id="drop4" name="" class="drop">
                <option>4</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner4">
        </div>
    </td>
  </tr>
  <tr>
    <td>
        <div id="img5" style="width:100px;height:40px;position:relative;">
            <select id="drop5" name="" class="drop">
                <option>5</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner5">
        </div>
    </td>
    <td>
        <div id="img6" style="width:100px;height:40px;position:relative;">
            <select id="drop6" name="" class="drop">
                <option>6</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner6">
        </div>
    </td>
    <td>
        <div id="img7" style="width:100px;height:40px;position:relative;">
            <select id="drop7" name="" class="drop">
                <option>7</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner7">
        </div>
    </td>
    <td>
        <div id="img8" style="width:100px;height:40px;position:relative;">
            <select id="drop8" name="" class="drop">
                <option>8</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" disabled="disabled" checked="checked">
            <img src="" width="120" height="40" id="img_banner8">
        </div>
    </td>
  </tr>
</table>

Script:

  $(".drop").change(function () {
  var flag = false;

  for (var i = 1; i <= 8; i++) {
      var dropdown = document.getElementById('drop' + i);

      if (flag == true && source.value != i) {
          dropdown.value = i;
      }
      if (dropdown.value != 0 && dropdown.value != i && flag == false) {
          var a = i;
          var b = dropdown.value;
          var pos = i;
          var source_div = document.getElementById('img' + i);
          var source = dropdown;
          var destination = document.getElementById('drop' + dropdown.value);
          var destination_div = document.getElementById('img' + dropdown.value);
          var posDrop = Math.ceil(dropdown.value / 4);
          var posI = Math.ceil(i / 4);

          var modDrop = (dropdown.value % 4);
          var modI = (i % 4);
          if (modDrop == 0) modDrop = 4;
          if (modI == 0) modI = 4;
          if (modDrop > modI) {
              // move right
              var diff = modDrop - modI;
              $("#img" + i).animate({
                  left: +((diff) * 130) + "px"
              });
              $("#img" + dropdown.value).animate({
                  right: +((diff) * 130) + "px"
              });
          } else if (modDrop < modI) {
              // move left
              var diff = modI - modDrop;
              $("#img" + i).animate({
                  right: +((diff) * 130) + "px"
              });
              $("#img" + dropdown.value).animate({
                  left: +((diff) * 130) + "px"
              });
          }

          if (posDrop > posI) {
              //move down
              $("#img" + i).animate({
                  top: +(70) + "px"
              });
              $("#img" + dropdown.value).animate({
                  bottom: +(70) + "px"
              });
          } else if (posDrop < posI) {
              // move up
              $("#img" + i).animate({
                  bottom: +(70) + "px"
              });
              $("#img" + dropdown.value).animate({
                  top: +(70) + "px"
              });
          }
          flag = true;

      }
  }
  destination.value = pos;

  var temp_div = source_div.id;
  source_div.id = destination_div.id;
  destination_div.id = temp_div;

  var temp = source.id;
  source.id = destination.id;
  destination.id = temp;
});

Answer 1

Can I suggest that you use a wholly different approach? Rather then animating the divs directly, use an array to store information about which div is where and then re-render this part of the page every time a re-ordering has been made.

so say you've got an array like this:

[0, 1, 2, 3, 4, 5, 6, 7]

then pushing value 'x' on div 'y' leads to storing array[y-1] in z, setting array[y-1] to x-1, then setting array[x-1] to z.

Now you've switched them in your array in a stable manner.

Then re-render the table.

You could also add the array values to the divs with an data-arVal attribute if you like. This could be the basis of some nice animations.

Loop through the array like this

jQuery.each(array, function(i, arVal){
     //and set the values of the data attribute
     $('td:nth-child(' + i + ') div)'.attr('data-arVal', '' + arVal + '' );
});

data attributes are your friend. And jQuery each loops are way more handy and powerfull then for loops, I highly recommend you use the jQuery.each loop.

ps could be some typos here, didn't test what I wrote.

Answer 2

I created http://jsfiddle.net/qa03f7g1/27/ . It may not be perfect but the code is simpler. I also removed the div 's from the table and positioned them absolutely.

$(".drop").change(function () {

    var $thisElem = $(this).parent();

    var swapIndex = $(this).children(":selected").val();
    var $swapElem = $("#img" + swapIndex);

    var thisPosition = $thisElem.position();
    var swapPosition = $swapElem.position();

    $thisElem.finish()
        .animate({left: swapPosition.left})
        .animate({top: swapPosition.top});

    $swapElem.finish()
        .animate({left: thisPosition.left})
        .animate({top: thisPosition.top});

    $swapElem.attr("id", $thisElem.attr("id"));
    $thisElem.attr("id", "img" + swapIndex);

});

Some problems:

• If on the same left position, there will be a delay as it animates each item to the same left position. This can be fixed with an if statement.
• You may want to set each option to it's corresponding location. This is easily done, comment if you want it done.