jQuery选择并拖动具有相对和绝对位置的元素

I have a select and drag code that works well until in selection is added a position relative div.

我有一个选择和拖动代码，运行良好，直到选择添加位置相对div。

Here is the code and you can see a working demo at http://jsbin.com/azeli/2 To see the problem just mouse select span 1, span 2 and the nested span 4

这是代码，您可以在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});
          });

      },  

  });
  });

Please let me know if this can be fixed. Thank you.

如果可以修复，请告诉我。谢谢。

1 个解决方案

#1

Make the position absolute for all elements within the selection, restore the original position when the selection changes.

使选择中的所有元素的位置绝对，在选择更改时恢复原始位置。

outside the loop

在循环之外

var originalPositions = new Array();

inside the loop

在循环内

// 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});

#1