Dragging and dropping one dialog box into another box adding unnecessarily scrollable bar

Question

When one dialog box i.e 'Iteration 1' dragged and dropped into another dialog box i.e Release 1 works perfectly but adding unnecessarily scrollable bar to other dialog box i.e 'Release 1'.I want to see my dialog box i.e 'Iteration 1' at the top left corner itself.

$(document).ready(function() {

    $( "#dialogRelease").dialog({

        autoOpen: false,
        modal: false,
        show:  {effect: 'fade', duration: 2000},
        hide: "size",
        resizable:false,
        draggable:true,
        height: 360,
        width: 450,
        position: [1300,500]
    });

});

Do i've to change something here?

Demo code here [http://jsfiddle.net/coolanuj/7683X/14/]

@pmandell any help from your side will be highly appreciated. — Little bird, Nov 08 '12 at 05:45
@Munchies : any help from your side will be highly appreciated — Little bird, Nov 08 '12 at 05:46

score 1 · Answer 1 · answered Nov 08 '12 at 22:17

If you are talking about draggable box placement inside another container after release, actually, the problem is somewhere else. When you release an item, it is appended to its new container, but you dont change top and left css values of the draggable item. So, it ends up being appended out of the visible area. If there is only one container, you can fix it like so:

function deleteImage($item) {
    $item.fadeOut(function() {
        var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);

        ////////position fix/////////
        $item.css({
            top: 10,
            left: 10
        });
        $item.find(".placeholder1").remove();
        $item.append($gallery).appendTo($list).fadeIn(function() {
            $item.animate({
                width: "200px"
            }).find(".placeholder1").animate({
                height: "250px"
            });
        });
    });
}

If the the container should accept more elements, you would need to find an algorithm to place them correctly.

score 0 · Accepted Answer · answered Nov 08 '12 at 22:13


    #dialogIteration {
        overflow:hidden;
    }

This fixes the scroll bar although I think you are looking for something else. Try focusing on setting up your css correctly before attempting to use jQuery plugins. This is a style issue not a jQuery issue.

Check the documentdation for drag and drop there may be an overflow option somewhere, also make sure all the elements in your dialogs have the correct styles or you will get very erratic behavior.

Dragging and dropping one dialog box into another box adding unnecessarily scrollable bar

2 Answers2