Results 1 to 5 of 5

Thread: drag and drop create image contrl

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    drag and drop create image contrl

    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!

  2. #2

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Re: drag and drop create image contrl

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

  3. #3
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: drag and drop create image contrl

    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.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  4. #4

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Re: drag and drop create image contrl

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

  5. #5

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Re: drag and drop create image contrl

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

    Code:
        <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!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width