containment is not working with Drag Drop and Re-sizable div

containment is not working with Drag Drop and Re-sizable div

"containment " is not working with Drag and Drop.
Kindly check the below code.

// JavaScript source code
$(document).ready(function () {
    //Counter
    counter = 0;
    //Make element draggable
    $(".drag").draggable({
        helper: 'clone',
        containment: 'frame',
        

        //When first dragged
        stop: function (ev, ui) {
            var pos = $(ui.helper).offset();
            objName = "#clonediv" + counter
            $(objName).css({ "left": pos.left, "top": pos.top });
            $(objName).removeClass("drag");


            //When an existiung object is dragged
            $(objName).draggable({
                containment: 'parent',
                stop: function (ev, ui) {
                    var pos = $(ui.helper).offset();
                    console.log($(this).attr("id"));
                    console.log(pos.left)
                    console.log(pos.top)
                }
            });
        }
    });
    $("#frame").droppable({

        drop: function (ev, ui) {
            if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                counter++;
                var element = $(ui.draggable).clone();
                element.addClass("tempclass");
                $(this).append(element);
                $(".tempclass").attr("id", "clonediv" + counter);
                $("#clonediv" + counter).removeClass("tempclass");

                //Get the dynamically item id
                draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                itemDragged = "dragged" + RegExp.$1
                console.log(itemDragged)
                $("#clonediv" + counter).addClass(itemDragged);
                $("#clonediv" + counter).resizable({ containment : 'frame'});
                $("#clonediv" + counter).addClass("selectedItem")
                $("#clonediv" + counter).append("<p class='showData'/>");
               
                //resizable div height width calculation and show it in P.
                $("#clonediv" + counter).resize(function () {
                    
                    var divWidth = $("#clonediv" + counter).width();
                    var divHeight = $("#clonediv" + counter).height();
                    $(this).children(".showData").text("W:" + divWidth + " , " + "H:" + divHeight);
                    console.log($(this).attr("id"));
                    console.log("Width", divWidth)
                    console.log("Height", divHeight)

                    //Delete the resizable div on double click
                    $(".selectedItem").dblclick(function () {
                        $(this).remove();
                    });
                    
                });

                $(".selectedItem").click(function () {
                    $('div').removeClass('active');
                    $(this).addClass('active');


                });
              
            }
        }

         
    });
    

});


I am stuck in 

 $("#clonediv" + counter).resizable({ containment : 'frame'});

where frame is a id slector.

Please assist me.