I have write the information related to image.
The information is written in div tag.
The image is in another div tag.
How to move image with its information.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DragDrop.aspx.cs" Inherits="DragDrop2.DragDrop" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="../StyleSheet1.css"/>
<link rel="stylesheet" type="text/css" href="../Jquerycycle/StyleSheet1.css"/>
<link rel="stylesheet" type="text/css" href="../Jquerycycle/StyleSheet2.css"/>
<script type="text/javascript" src="../Jquerycycle/JScript1Cyc.js"></script>
<script type="text/javascript" src="../Jquerycycle/JScript3.js"></script>
<script type="text/javascript" src="../Jquerycycle/JScript4.js"></script>
<script type="text/javascript" src="../Jquerycycle/JScript5.js"></script>
<script type="text/javascript">
$('#s5').cycle({
fx: 'scrollHorz',
timeout: 500,
next: '#next1',
prev: '#prev1',
timeout: 0,
pager: '#nav',
nowrap: 1
});
$('#prev').click(function () {
return false;
});
$('#next').click(function () {
return false;
});
$("#btnPage").live("onchange", function () {
$("[id$=div]").hide();
$("#div" + $("#txtPageno").val()).show();
});
</script>
<script type="text/javascript" src="../JqueryMove/JScript1.js"></script>
<script type="text/javascript" src="../JqueryMove/JScript2.js"></script>
<script type="text/javascript">
$(init);
function init() {
$('.movable').draggable({
cursor: 'move',
containment: '#s5',
cursor: 'move',
snap: '#s5',
stop: handleDragStop
});
}
function handleDragStop(event, ui) {
var offsetXPos = parseInt(ui.offset.left);
var offsetYPos = parseInt(ui.offset.top);
alert("Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="s5">
<div id="div1" style="width:500px; height:500px; border:10px soild #ffffff;background-color:Aqua;" >
<center>
<div style="width:500px; height:500px; border:10px soild #ffffff; background-color:Aqua;">
<div id="Div2" style="padding-left:100px; float:left;"></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div3" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/><div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div4" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div5" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
</div>
</center>
</div>
<div id="div2" style="width:500px; height:500px; border:10px soild #ffffff;background-color:Fuchsia" >
<center>
<div style="width:500px; height:500px; border:10px soild #ffffff; background-color:Fuchsia;">
<div id="Div7" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div8" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div9" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div10" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
</div>
</center>
</div>
<div id="div3" style="width:500px; height:500px; border:10px soild #ffffff;background-color:Gray;" >
<center>
<div style="width:500px; height:500px; border:10px soild #ffffff; background-color:Gray;">
<div class="Div12" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div class="Div12" style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div13" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div14" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div id="Div15" style="padding-left:100px; float:left;"><img class="movable" src="../Images/1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
</div>
</center>
</div>
</div>
<div id="nav">
<asp:Button ID="next1" runat="server" Text="Next" />
<asp:Button ID="prev1" runat="server" Text="Prev" />
</div>
<asp:TextBox ID="txtPageno" runat="server"></asp:TextBox>
<%-- <input type = "button" id = "btnPage" value = "Go" runat="server" />--%>
<asp:Button ID="btnPage" runat="server" Text="Go" />
</form>
</body>
</html>
