<!doctype html>
<html lang="en">
<head>
<title>A Draggable Element with Options</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="../StyleSheet1.css">
<%--<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
</style>
--%>
<script type="text/javascript" src="../JScript1.js"></script>
<script type="text/javascript" src="../JScript2.js"></script>
<script type="text/javascript">
$(init);
function init(){
$('#makeMeDraggable0').draggable({
cursor: 'move',
containment: '#content',
cursor: 'move',
snap: '#content',
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 runat="server">
<div id="content" style="width:500px; height:500px; border:10px soild #ffffff;background-color:Aqua;" >
<div style="width:500px; height:500px; border:10px soild #ffffff; background-color:Aqua;">
<div id="makeMeDraggable0" style="padding-left:100px; float:left;"><img 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="makeMeDraggable1" style="padding-left:100px; float:left;"><img 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="makeMeDraggable2" style="padding-left:100px; float:left;"><img 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="makeMeDraggable3" style="padding-left:100px; float:left;"><img 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>
</div>
</form>
</body>
</html>
This is my code by using above code i can move one image because i have given the id of that div in .draggable method But i m not able to move other images.
