CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rella
Rella

Reputation: 66945

How to make my div resize on resize handler dragg?

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?

Upvotes: 0

Views: 911

Answers (2)

James Montagne
James Montagne

Reputation: 78650

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")));
});

Upvotes: 2

chrixian
chrixian

Reputation: 2811

I like jqDnR for drag/resize without JQUI.

Upvotes: 1

Related Questions