使用jquery draggable进行拖动时，保持Bootstrap“ column”元素的宽度

Question

我在使用bootstrap（3.x）框架时遇到了一个问题，我们已经指定了可以使用jquery的draggable功能来拖动元素列表，但是一旦元素开始拖动，就会将其从容器中删除.row流，因为jquery添加position:absolute; 因此会丢失适当的宽度。

例如，如果可拖动元素的类为.col-lg-6则通常为包含的.row 50％，但是一旦我开始拖动，该元素就会立即变为视口的100％。

如何设置可拖动项目的样式，以使其在拖动过程中保持其原始大小？

Answer 1

您只需要从原始元素中获取尺寸并将其应用于helper元素：

$(el).draggable({
  helper: 'clone',
  start: function (event, ui) {
    var w = $(this).css('width');
    var h = $(this).css('height');
    ui.helper.css('width', w).css('height', h);
  }
});

在这里演示