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

Question

当我检查页面上的一个元素时，我看到它的宽度是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四舍五入的宽度和高度?如何得到更准确的值?

Answer 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)
        });
    }
});

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