JQuery Draggable Object, set containment with dynamic div tags

I have multiple div tags that i can drag objects to.
I would like to contain the draggable objects to the div tags. These div tags are dynamically generated.

In order to do this, i realized that i would have to list all the div containers. These are only available when the program runs initially.
Then i can set the containment with the list of divs returned.

My issue is that the containment functionality only works for the first div and not the other ones.

I would like to have a solution in place where the dragged objects can be moved anywhere inside the dynamically generated div tags

Please see the code i used below to retrieve the dynamically generated div tags and set them to the containment option.

Can somebody please explain how i can set the containment with dynamically generated divs and restrict objects dragged to these divs?.

                //Handle object drop in div area
            function handleContainmentDIVs() {
                var id;
                var i = 0;

                $("div[id$='pnlPdfPage']").each(function () {
                    if (i == 0)
                        id = $(this);
                    else
                        id = id.add($(this));

                    i++;
                }
                    );

                return id;
            }

//Make element droppable
                $(".droppablePage").droppable({
                    accept: '.existingFieldItem, .existingPageObject',
                    containment: handleContainmentDIVs()
};



                    //Make element draggable
                $(".draggableItem").draggable({
                    //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
                    helper: function () {
                        return $(this).clone().appendTo('body').css({
                            'zIndex': 5
                        });
                    },
                    revert: "invalid",
                    cursor: 'move',
                    containment: handleContainmentDIVs()
                });


Source: css

Leave a Reply