使用jquery draggable拖动时保持Bootstrap“列”元素的宽度答案

【问题标题】：Maintain width of Bootstrap "column" element when dragging using jquery draggable使用jquery draggable拖动时保持Bootstrap“列”元素的宽度
【发布时间】：2014-07-15 15:55:57
【问题描述】：

我遇到了一个问题，我们使用的是 bootstrap (3.x) 框架，并且我们已经指定使用 jquery 的draggable 功能可以拖动元素列表，但是一旦元素开始拖动，它就是从它的容器.row 流中删除，因为 jquery 添加了position:absolute;，因此丢失了正确的宽度。

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

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

【问题讨论】：

可能在draggable.create事件上将宽度设置为精确的像素大小？
你能上传你的代码吗？
@DavidG 想到了这一点，但我试图在脚本中尽可能多地维护vanilla。希望通过 CSS 提供一个简单的方法，但如果需要，总是可以依靠扩充 draggable.crate 方法。
@Ashesh 我可能会在一段时间内，但是混入了大量其他垃圾，因此为此需要一段时间才能清理干净。这个概念很简单，从一行中取出一列会失去它的宽度，那么我们如何在拖动过程中保持宽度。
我认为没有其他方法。 .col-* 类需要基于百分比，因为它们可以嵌套。除了.col-* 之外，您唯一的选择是应用您自己的类来固定宽度。

标签： jquery twitter-bootstrap twitter-bootstrap-3 draggable jquery-ui-draggable

【解决方案1】：

您只需要从原始元素中获取尺寸并将它们应用于辅助元素：

$(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);
  }
});

Demo here

【讨论】：

您从原始元素获得的宽度和高度是基于百分比的。你测试过这个吗？
是的，我有。通过 jQuery css 函数检索宽度总是返回以像素为单位的实际宽度，包括单位描述，即 '123px'。
@oucil - 在我的回答中添加了 jsfiddle