使用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);
  }
});

在這里演示