jQuery Sortable with box-sizing:border-box [英] jQuery Sortable with box-sizing:border-box

问题描述

我发现，如果一个元素在使用jquery的可排序实现时具有"box-sizing:border-box"，则在拖动时会丢失/更改其大小.

I've found that if an element has "box-sizing: border-box" when using jquery's sortable implementation it losses/changes its size when dragged.

示例-

http://jsfiddle.net/veBJh/2/

如果删除box-sizing:border-box属性，它将按预期工作，并保持原始元素的尺寸.有什么办法解决(减去更改box-sizing属性，这是项目的全局设置，我宁愿不删除它，因为它会使其他一切变得更加简单！)?

If you remove the box-sizing:border-box attribute it will work as expected, keeping the original elements dimensions. Is there any way around this (minus changing the box-sizing attribute, it's a global setting on the project and I'd rather not remove it as it makes everything else so much simpler!)?

推荐答案

我遇到了同样的问题，并通过向可排序调用中添加了自定义帮助程序"来解决了这个问题:

I ran into the same problem and solved it by adding a custom 'helper' to the sortable call:

$('#container').sortable({
    helper: function(event, element) {
      var clone = $(element).clone();
      var w = $(element).outerWidth();
      var h = $(element).outerHeight();
      clone.css({
          'width': w+'px',
          'height': h+'px'
        });
      return clone;
    }
});

这篇关于jQuery Sortable with box-sizing:border-box的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！