CODEWITHSUNDEEP
jquerycsshtmljquery-ui
MuhammetK
MuhammetK

Reputation: 255

jquery-ui resizing one element effects others

I have one toolbar which has draggable 3 images and one page field that you can drop that images into. I am planning to drag-drop unlimited item from toolbar to page field and resize them as i wish. Dragged elements are acting strange(jump anywhere or disappear somehow), if i drag-drop 3 or more item from "toolbar" to "page field" and try to resize them.

You can check-out here: http://jsfiddle.net/v3W62/

$(function () {
                $(".toolbar li").draggable({
                    helper: "clone",
                    revert: "invalid",
                    grid: [20, 20]
                });
                $(".page").droppable({
                    accept: ".toolbar li",
                    drop: function (event, ui) {
                        $("<div style='background:black; position:absolute'><img></img></div>").draggable({ 
                            cursor: "move", grid: [20, 20], containment: "parent" 
                        }).resizable({
                            containment: "parent", handles: "n, w, e, s, es", grid: 20      
                        }).height(100).width(100).appendTo(".page");
                    }
                })
            });

For example:
1-Try to add one image into yellow page.
2-Drag that image bottom of the yellow page.
3-Try to re-size that image.

Upvotes: 0

Views: 365

Answers (1)

user2718671
user2718671

Reputation: 2976

Ah ok, now I see. I deleted the containment option and added a maxWidth and maxHeight option instead:

Here is the fiddle: http://jsfiddle.net/v3W62/1/

Here the changed lines:

//containment: "parent", 
maxHeight: $('.ui-droppable').height(),
maxWidth: $('.ui-droppable').width(),

Seems to work. Please try it and let me know if it helped :)

Upvotes: 1

Related Questions