7

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

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

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

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

如何使克隆保持原件的宽度？

4

3 回答 3

17

乔恩的回答真的很好，但是当您在可拖动中有子元素时它不能正常工作。在这种情况下，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*
    });                
  },
  ...
});

如果没有这个，助手将表示在可拖动对象中单击的任何子元素（例如，单击“拖动 1”框中的浅蓝色区域内的 ）。添加上面的附加逻辑可确保将可拖动元素用于帮助程序。希望对遇到类似情况的人有所帮助！

*注意outerWidth：如果原始元素已应用，您将需要使用box-sizing: border-box（感谢@jave.web 提出）。

于 2013-07-10T10:00:26.047 回答
7

您只需要在拖放时根据可拖动对象设置克隆元素的宽度和边距，使用$(ui.draggable).clone().css({ ... });

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

于 2013-02-15T01:05:21.393 回答
1

我想我知道问题出在哪里......你在哪里：

<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 的宽度。

于 2013-02-15T00:30:50.710 回答