javascript - 当 div 大小改变时，可拖动 div 相对于光标居中

Question

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

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

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

Fiddle demonstrating the issue.

$('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，那么它应该正确执行，但事实并非如此。

I've also tried moving the changing of the size to the mousedown event in to make sure the CSS get's changed first (in case for some reason it wasn't...was just a way to make sure) but it still doesn't work correctly.

And I also tried calculating the new sizes first, and then using the variable to do the calculations instead of relying on the CSS values. Still didn't work.

Answer 1

您必须使用 jQuery UI 中的 .draggable() 吗？
我在 http://pastebin.com/vCr0xuTz 上组装了一个 jQuery 插件您需要哪些汽车中心
然后，您可以只使用 $('div').drag(); ，当大小发生变化时，它应该使 div 居中。

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