Question

So I try to create my own window system (because I want to have more ease of styling than I get with Jquery UI dialog, and do not want to include JQ UI at all.) So I have http://jsfiddle.net/ffCXe/1/ – a window, draggable with and a div on drag of which I want the window to resize. But what would be best way to resize it not using JQ UI but using JQuery? And how to do it?

Answer 1

How about something like this?

http://jsfiddle.net/ffCXe/6/

$(".resize").bind('dragstart', function(event) {
    var $box = $(this).closest(".box");

    $box.data("width", $box.width());
    $box.data("height", $box.height());
    $box.data("x", event.offsetX);
    $box.data("y", event.offsetY);

}).bind("drag", function(event) {
    var $box = $(this).closest(".box");

    $box.width(Math.max($box.data("width") - $box.data("x") + event.offsetX, $box.data("minwidth")));
    $box.height(Math.max($box.data("height") - $box.data("y") + event.offsetY, $box.data("minheight")));
});