我正在使用 jQuery UI Draggable 来拖动 <div>，其宽度作为布局的一部分计算 (margin:auto;)。
当使用helper:clone 拖动该元素时，克隆也获得margin:auto; 样式，但不再受原始容器的约束。
结果：克隆的<div> 可能与原始的宽度不同。
小提琴：http://jsfiddle.net/ericjohannsen/ajpVS/1/
我怎样才能使克隆保持原件的宽度？
【问题讨论】：
标签： jquery-ui jquery-ui-draggable
Jon 的回答非常好，但是当您在可拖动元素中有子元素时，它就不能正常工作了。在这种情况下，event.target 可以代表您的可拖动对象的子对象，您需要修改可拖动对象的 helper() 方法，如下所示：
$(".objectDrag").draggable({
helper: function(e) {
var original = $(e.target).hasClass("ui-draggable") ? $(e.target) : $(e.target).closest(".ui-draggable");
return original.clone().css({
width: original.width() // or outerWidth*
});
},
...
});
Without this，帮助器将表示在可拖动对象中单击的任何子元素（例如，单击“拖动 1”框中的浅蓝色区域内的 ）。 Adding the additional logic above 确保可拖动元素用于助手。希望对遇到类似情况的人有所帮助！
* 注意：如果原始元素应用了box-sizing: border-box，您将需要使用outerWidth（感谢@jave.web 提出）。
【讨论】：
.outerWidth() 和 .outerHeight() 如果简单的 .width()/.height() 不适合你:)
box-sizing: border-box，则需要使用它们（这很快成为标准） . See example.
您只需要在克隆元素被拖放时根据可拖动对象设置宽度和边距，使用$(ui.draggable).clone().css({ ... });
这是一个更新的小提琴，应该是你要找的。它还将保持辅助对象的宽度。 http://jsfiddle.net/ajpVS/2/
【讨论】：
我想我知道问题出在哪里......你在哪里：
<div style="width:50px">
它还需要包含在 objectDrag 类中：
<div class="objectDrag" style="width:50px;margin:auto; color:white;border:black 1px solid; background-color:#00A">Drag me</div>
我希望这就是你的意思！
编辑：
您好又快速浏览了一下 http://jsfiddle.net/He2KZ/1/
我使用 width:inherit 属性来继承父母的宽度，无论它是什么大小。我还注意到删除边框解决了这个问题。可拖动的克隆是 2px 出来的，你有一个 1px 的边框。这有点来自 Jquery-ui IMO 的错误，他们至少应该考虑边界。
如果您真的想要边框，请尝试使用“轮廓”而不是“边框”。这不会增加 div 的宽度。
【讨论】：