當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/