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!
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?
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.
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.
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!