jQuery Выберите и перетащите элементы с относительной и абсолютной позицией

Question

У меня есть код выбора и перетаскивания, который хорошо работает, пока в выделении не добавлена ​​позиция относительного деления.

Вот код, и вы можете увидеть рабочую демонстрацию на http://jsbin.com/azeli/2 Чтобы увидеть проблему, просто выберите мышью span 1 , span 2 и вложенный span 4

$(function() {

  var selected = $([]), offset = {top:0, left:0};
  $("#selectable1").selectable();

    $("#selectable1 span.drag").draggable({

        start: function(ev, ui) {

        selected = $(".ui-selected").each(function() {
        var el = $(this);
        el.data("offset", el.offset());

        });

        offset = $(this).offset();

      },

      drag: function(ev, ui) {

        var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;

        selected.not(this).each(function() {
          var el = $(this), off = el.data("offset");
          el.css({top: off.top + dt, left: off.left + dl});
          });

      },  

  });
  });

Пожалуйста, дайте мне знать, если это можно исправить. Спасибо.

Answer 1

Сделать абсолютную позицию для всех элементов в выделении, восстановить исходную позицию при изменении выделения.

вне цикла

var originalPositions = new Array();

внутри цикла

// call the restorePositions() that goes through the array of 
// saved elements, restoring each position and remove the element from the array;
// if element in the loop has a position thats not relative, add to array
el.css({position: 'absolute', top: off.top + dt, left: off.left + dl});