Разъем Div не работает должным образом

Question

Ниже приведена моя программа. Здесь я хочу обменять выбранный div. при щелчке правой кнопкой мыши на div сначала выбирается div, и при щелчке левой кнопкой мыши другой div оба div будут обмениваться друг с другом. В первый раз все div будут работать правильно, и в следующий раз, когда мы выберем тот же div для обмена, он не будет работать должным образом. Пожалуйста, помогите мне решить эту проблему ...

Спасибо заранее ...

var asd = ''; 
$(document).ready(function() { 
    $('.cell').mousedown(function (event) { 
     switch (event.which) { 
      case 1: 
       //left 
       animateDiv($(this)); 
       break; 
      case 3: 
       //right 
       asd = $(this); 
       $(this).css('border-color', 'red'); 
       break; 
     } 
    }); 

    function animateDiv(This) { 
     var new_pos = This.offset(); 
     var pos = asd.offset(); 
     asd.css('border-color', 'yellow'); 
     asd.animate({ 
      left: new_pos.left - pos.left, 
      top: new_pos.top - pos.top 
     }, 2000, function() {}); 
     This.animate({ 
      left: pos.left - new_pos.left, 
      top: pos.top - new_pos.top 
     }, 2000, function() { 

     }); 
     asd = ''; 
    } 
}); 

FIDDLE

Answer 1

Ваших дивы в ячейках таблицы и offset возвращает смещение относительно ячейки родительской таблицы. Divs не меняют свои ячейки, они просто меняют положение.

Так возможные решения:

• Не использовать таблицы для этой цели

ИЛИ

• Move дивы также физически целевой ячейки таблицы.

Я предпочел бы первое решение без таблиц.

См. Обновленный JSFIDDLE. Я изменился:

• функцию placeCells для визуализации дивы с их исходным положением
• .cell элементы позиции absolute
• использование position функции Jquery вместо offset
• изменил left и topanimate «s вариантов