Question

我正在编写一个带有可拖动字段（div）的应用程序。在放置这些字段之前，它们只有一个尺寸，但是一旦它们被拾取并被拖动，它们就会变为它们的最终状态＆＃34;尺寸（尺寸也可以在以后改变，但它们保持拖动尺寸，直到稍后手动更改）。

我想要做的是在拖动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应该正确地执行它，但它没有。

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/

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

1 个答案: