プログラム的に、jQuery Resizableをトリガする方法

Question

jqueryのResizableで作ったdiv要素があります。

alsoResizeオプションセットもあるので、他の要素は同時にサイズ変更します。

Resizable div要素をプログラム的にサイズを設定して、全てのResizableロジックがトリガされるようにしたいです。（alsoResizeオプションも考慮に入れています。)

どのようにできますか？

Answer 1

これで出来ると思います。試してみて下さい。

【javascript】

$.widget("ui.resizable", $.ui.resizable, {
    resizeTo: function(newSize) {
        var start = new $.Event("mousedown", { pageX: 0, pageY: 0 });
        this._mouseStart(start);
        this.axis = 'se';
        var end = new $.Event("mouseup", {
            pageX: newSize.width - this.originalSize.width,
            pageY: newSize.height - this.originalSize.height
        });
        this._mouseDrag(end);
        this._mouseStop(end);
    }
});
$("#resizable_element").resizable({
    alsoResize: '#other_element, #other_element2, #other_element3',
    resize: function(event, ui) {
        console.log('resize called');
    }
});
$('button').click(function() {
    $('#resizable_element').resizable("resizeTo", {
        height: Math.random()*100+50,
        width: Math.random()*100+50
    });
});

【HTML】

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<button>サイズ変更ボタン</button>
 <div id="resizable_element"></div>
 <div id="other_element" class="other"></div>
 <div id="other_element2" class="other"></div>
 <div id="other_element3" class="other"></div>

【CSS】

#resizable_element, .other {
    width: 100px;
    height: 100px;
    background: #ccc;
}
.other {
    background: #666;
    border: solid 1px white;
}