<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#div1, #div2, #div3 {
width:150px;
height:100px;
border:5px solid green;
padding:5px;
margin:5px;
cursor:move;
}
</style>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#div1").draggable({ axis: "x" });
$("#div2").draggable({ axis: "y" });
$("#div3").draggable({
container: "#divcontainer" });
});
</script>
</head>
<body>
<form id="form2" runat="server">
<div id="div1" style="background-color:yellow">
Axis-x
</div>
<div id="div2" style="background-color:red">Axis-y</div>
<div id="divcontainer" style="width:500px; height:300px;border:2px solid
black">
<div id="div3" style="background-color:blue">In Container</div>
</div>
</form>
</body>
</html>
Output:
No comments:
Post a Comment