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

Question

我正在使用jQuery UI Draggable拖动<div>其宽度计算为layout(margin:auto;)的一部分.

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

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

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

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

Answer 1

Jon的答案非常好,但是当你在draggable中有子元素时,它无法正常工作.在这种情况下,event.target可以表示你的draggable的孩子,你想要修改draggable的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*
    });                
  },
  ...
});

如果没有这个,帮助器将表示在draggable中单击的任何子元素(例如,单击"Drag 1"框中的浅蓝色区域内).添加上面的附加逻辑可确保可拖动元素用于帮助程序.希望对类似情况下的任何人都有帮助!

*注意:outerWidth如果原始元素已box-sizing: border-box应用,您将需要使用(感谢@ jave.web提升).

Answer 2

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

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