# Other Languages > jQuery >  drag and drop create image contrl

## Jigabyte

Hi,

I have a div which contains a image control displaying a photo. I also have four images in div's which are arrows. I want to be able to clone (drag) the images on to the photo which I can do but I need it to physically create a new image control because I need to get this in code behind.

Any help please,

Jiggy!

----------


## Jigabyte

I can drag an drop the image using cloning but how do I get hold of the images I have dropped in code behind?

----------


## tr333

I don't claim to know much about this, but you might pick up some hints/examples from the code used at http://mothereffinganimatedgif.com/.

The code for that site is up on github.

----------


## Jigabyte

Thanks for the links but they seem to be using HTML 5 which is not yet fully compatible with all browsers.

----------


## Jigabyte

Here is my code but for some reason the dropped images are not where I drop them?



```
    <script type="text/javascript">
        $(document).ready(function() {
            Counter = 0;
            $(".drag").draggable({ helper: 'clone',
                cursor: 'move',
                containment: 'divPhoto',
                stop: function (ev, ui) {
                    var pos = $(ui.helper).offset();
                    objName = "#clonediv" + Counter
                    $(objName).css({
                        "left": pos.left,
                        "top": pos.top
                    });
                    $(objName).removeClass("drag");
                    $(objName).draggable({
                        containment: 'parent',
                        stop: function (ev, ui) {
                            var pos = $(ui.helper).offset();
                        }
                    });
                }
            });
            $("#divPhoto").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");
                        //draggedNumber = ui.helper.attr('id').Search(/drag([0-9])/);
                        itemDragged = "dragged" + RegExp.$1;
                        $("#clonediv" + Counter).addClass(itemDragged);
                    //}
                }
            });
        });     
    </script>  
</head>
<body>
    <form id="form1" runat="server">    
        <div id="divPhoto" runat="server" style="float:left; height: 450px; width: 600px;"> <asp:Image ID="imgPhoto" runat="server" Height="450px" Width="600px" ImageUrl="~/Photos/SARM-0225.jpg" /></div>
        <div id="divKPs" runat="server" style="float: left; width: 445px; height:448px; border: 1px solid gray;margin-left: 5px;"></div>
        <br/>        
        <div id="divToolbar" runat="server" style="clear: both; height: 30px; width: 1050px; margin-top:10px; border: 1px solid gray;">
            <div id="divUp" runat="server" class="drag" style="clear: both; float: left; margin-left: 10px; margin-top: 5px;"><asp:Image ID="Image1" runat="server" Height="20px" Width="20px" ImageUrl="~/Pointers/up.jpg"/></div>
            <div id="divDown" runat="server" class="drag" style="float: left; margin-left: 10px; margin-top: 5px;"><asp:Image ID="imgDown" runat="server" Height="20px" Width="20px" ImageUrl="~/Pointers/down.jpg"/></div>
            <div id="divLeft" runat="server" class="drag" style="float: left; margin-left: 10px; margin-top: 5px;"><asp:Image ID="imgLeft" runat="server" Height="20px" Width="20px" ImageUrl="~/Pointers/left.jpg"/></div>
            <div id="divRight" runat="server" class="drag" style="float: left; margin-left: 10px; margin-top: 5px;"><asp:Image ID="imgRight" runat="server" Height="20px" Width="20px" ImageUrl="~/Pointers/right.jpg"/></div>
            <asp:TextBox ID="txtKIP" runat="server"  Width="720px" style="margin-top: 5px; margin-left:10px;"></asp:TextBox>
            <asp:Label ID="Label1" runat="server" style="float:left; margin-top:5px; margin-left: 10px;" Text="Key Inspection Point : "></asp:Label>
            <div id="divBin" runat="server" style="float: right; margin-Right: 10px; margin-top: 5px;"><asp:Image ID="imgBin" runat="server" Height="20px" Width="20px" ImageUrl="~/Pointers/bin.png" ToolTip="Delete KIP" /></div>
        </div>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
```

I don't think this will work anyway because I need to store the id, x and y values for each div I drop on to my photo so I can dynamically draw it at a later date. Does anyone know of a way to be able to drag pointers on to a photo and remove them in necessary?

Many thanks,

Jiggy!

----------

