当div的大小更改时，使可拖动div相对于光标居中

Question

我正在编写具有可拖动字段（div）的应用程序。 在放置这些字段之前，它们是一种尺寸，但是一旦拾取并拖动它们，它们就会更改为“最终”尺寸（尺寸也可以在以后更改，但是它们会保持拖动的尺寸，直到以后手动更改） 。

我正在尝试做的是在拖动div时将div相对于光标居中。

我知道可拖动对象的cursorAt属性，但是第一次拖动对象时它不起作用。 如果您拖放，再次拖动，它将正确居中。

小提琴展示了这个问题。

$('div').draggable({
    start: function () {
        $(this)
            .css('height', (Math.floor((Math.random() * 250) + 100).toString() + 'px'))
            .css('width', (Math.floor((Math.random() * 250) + 100).toString() + 'px'));

        $(this).draggable('option', 'cursorAt', {
            top: parseInt($(this).css('height')) / 2,
            left: parseInt($(this).css('width')) / 2
        });
    }
});

显然，这只是一个例子，但是它说明了这一点，因为它永远不会使div相对于光标居中。 我认为，由于我首先设置了CSS，因此它应该正确执行操作，但事实并非如此。

我还尝试将大小的更改移到mousedown事件中，以确保首先更改了CSS（以防万一，由于某种原因，它不是...只是一种确保方式），但仍然没有不能正常工作。

我还尝试了先计算新的大小，然后使用变量进行计算，而不是依赖CSS值。 还是没用。

Answer 1

您是否必须使用jQuery UI中的.draggable（）？
我在http://pastebin.com/vCr0xuTz上放了一个jQuery插件，它可以像您需要的那样自动居中
然后，您可以只使用$('div').drag(); 并在大小更改时将div居中。

JSFiddle： http : //jsfiddle.net/blue11086/d06r990w/3/