Question

我正在使用jQuery UI Draggable拖动<div>，其宽度计算为布局的一部分（margin:auto;）。

使用helper:clone拖动该元素时，克隆也会获得margin:auto;样式，但不再受原始容器的约束。

结果：克隆的<div>可能具有与原始宽度不同的宽度。

小提琴：http://jsfiddle.net/ericjohannsen/ajpVS/1/

如何让克隆保留原始宽度？

Answer 1

Jon的回答非常好，但是当你在draggable中有子元素时，它无法正常工作。在这种情况下，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提升）。

Answer 2

使用$(ui.draggable).clone().css({ ... });

时，您只需要在删除时根据可拖动对象设置克隆元素的宽度和边距。

这是一个更新的小提琴，应该是你正在寻找的。它也将保持辅助对象的宽度。 http://jsfiddle.net/ajpVS/2/

Answer 3

我想我知道问题是什么..你在哪里：

<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他们应该至少考虑到边界。

如果你真的想要边框，请尝试使用“outline”而不是“border”。这不会增加div的宽度。

如何确保拖动的元素克隆保留原始宽度

3 个答案: