拖动时元素的jQuery UI舍入宽度答案

【问题标题】：jQuery UI rounding width of element when dragging拖动时元素的jQuery UI舍入宽度
【发布时间】：2015-11-02 12:06:00
【问题描述】：

当我检查页面上的一个元素时，我看到它的宽度是 83.2 像素。

我用 jQuery UI 让它“可拖动”：

$el.draggable({
    start: function (event, ui) {
        //$(ui.helper).css('margin', 0); //prevent jumping
        console.log('width:', $(ui.helper).css('width'));
        //console.log('width:', $(ui.helper).width());
        //console.log('width:', $(event.target).css('width'));
    }
});

拖动元素后到控制台的输出为width: 83px。这会导致稍后在元素文本中出现换行符。

jQuery UI 是否舍入了宽度和高度？如何获得更准确的值？

【问题讨论】：

如果您要删除边距，宽度小于原来的宽度是否有意义？
Math.round($(ui.helper).width()); 使用这个
艾萨克，我也是这么想的。但是宽度没有正确报告，即使我删除了那条线。 Rejith：我不打算四舍五入。我想在拖动元素时获取元素的精确浮点宽度。但是jQueryUI似乎在拖动元素时会舍入宽度。

标签： javascript jquery css jquery-ui draggable

【解决方案1】：

我在这个问题中找到了答案： https://stackoverflow.com/a/16072668/426266

jQueryUI 似乎在拖动元素时将元素的宽度设置为整数值。此外，$(element).width() 将始终返回一个四舍五入的整数值。

我解决了这样的问题：

$el.draggable({
    start: function (event, ui) {

        var width = event.target.getBoundingClientRect().width;

        $(ui.helper).css({
            'width': Math.ceil(width)
        });
    }
});

现在元素被拖动时不再有换行符。

【讨论】：