jQuery Multiple Draggable Object Creation

This is a complicated problem for me. Here is what I want:

I have designed a div which is draggable and 1 instance is already on the page ready for dragging. When user drags it, I want to dynamically create a new instance of it. I also should be able to remove it with the click of a button so they should all be accessable.

Can you point me out the right path to do this?

Here is what I have so far:

$(document).ready(function() {

            $('#dragThis').resizable({
                stop: function(event, ui) {
                    var w = $(this).width();
                    var h = $(this).height();
                    var tr = $('#contentDiv');
                    tr.each(function() {
                        //alert( fields[$(this).index()] )
                        $(this).height(h - 45);
                    });


                    console.log('StopEvent fired')
                    console.log('Width:' + w);
                    console.log('Height:' + h)
                }
            }).draggable(
            {
                containment: $('body'),
                drag: function() {
                    var offset = $(this).offset();
                    var offsetImage = $("#<%=dropHere.ClientID %>").offset();
                    var xPos = offset.left;
                    var yPos = offset.top;

                    $('#posX').text('x: ' + xPos);
                    $('#posY').text('y: ' + yPos);

                },
                stop: function() {
                    var finalOffset = $(this).offset();
                    var finalxPos = finalOffset.left;
                    var finalyPos = finalOffset.top;

                    $('#finalX').text(开发者_Go百科'Final X: ' + finalxPos);
                    $('#finalY').text('Final X: ' + finalyPos);
                }
            });

and here is my html:

<div class="dragThis" id="dragThis">
                    <div class="content" id="contentDiv">
                        <p>
                            <asp:Label ID="lblContent" Width="2px" runat="server" Text="Label"></asp:Label>
                        </p>
                    </div>
                    <div class="pointer">
                        <div class="one">
                        </div>
                        <div class="two">
                        </div>
                    </div>
                </div>

I'm currently able to resize, drag and get location of 1 div. I need to make it work for multiple divs.

Please remember that I need to access to these divs (positions and texts inside them - setting and getting)

Any help is appreciated.

Thank you

Wrap your code into a callable function. Then, when you create new div you should use "destroy" methods to destory current instances of resizable+draggable (

$('#dragThis').resizable('destroy').draggable('destroy');

) and then run function to reinitialize resizable + draggable;