Hi I giving you my code .
I want to save that co-ordinates in database.
I m getting that co-ordinates from javascript code but i want to save that co-ordinates in database using asp.net code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="dragDropimage.WebForm1" %>
<!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>
<style type="text/css">
<!--
@import "/_common/demo.css";
body { margin:0px; }
#b {
cursor:move;
cursor:hand;
}
#g {
cursor:hand;
cursor:move;
}
#p
{
cursor:hand;
cursor:move;
}
#pbox {
position:absolute;
left:20px; top:20px;
width:700px; height:700px;
border:1px dashed #333399;
}
-->
</style>
<style type="text/css" href="../demos.css"></style>
<script type="text/javascript" language="javascript" src="../dom-drag.js"></script>
<script type="text/javascript" language="javascript">
var reportBox, iReportCount = 0;
window.onload = function () {
if (document.all || document.getElementById) {
var oB = document.all ? document.all["b"] : document.getElementById("b")
var oG = document.all ? document.all["g"] : document.getElementById("g")
var oP = document.all ? document.all["p"] : document.getElementById("p")
reportBox = document.all ? document.all["oReport"] : document.getElementById("oReport")
reportBox2 = document.all ? document.all["oReport2"] : document.getElementById("oReport2")
Drag.init(oB);
Drag.init(oG);
Drag.init(oP);
// Drag.init(oP, null, 0, 274, 0, 249);
// report stuff
oB.onDragStart = function (x, y) { reportDragStart("black", x, y); }
oG.onDragStart = function (x, y) { reportDragStart("green", x, y); }
oP.onDragStart = function (x, y) { reportDragStart("purple", x, y); }
oB.onDragEnd = function (x, y) { reportDragEnd("black", x, y); }
oG.onDragEnd = function (x, y) { reportDragEnd("green", x, y); }
oP.onDragEnd = function (x, y) { reportDragEnd("purple", x, y); }
oB.onDrag = function (x, y) { reportDrag("black", x, y); }
oG.onDrag = function (x, y) { reportDrag("green", x, y); }
oP.onDrag = function (x, y) { reportDrag("purple", x, y); }
}
function reportDragStart(who, x, y) {
reportBox.value += who + " | onDragStart " + " (" + x + "," + y + ")\n"
}
function reportDragEnd(who, x, y) {
reportBox.value += who + " | onDragEnd " + " (" + x + "," + y + ")\n"
}
function reportDrag(who, x, y) {
reportBox2.value = who + " | onDrag " + " (" + x + "," + y + ")"
}
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<textarea id="oReport" style="margin-top: 600px; margin-left: 20px; width: 300px;
height: 100px;" wrap="off"></textarea>
<img id="p" title="isn't this simple pointer much better?" style="position: absolute;
top: 408px; padding: 0px;-webkit-user-drag:element;" src="1.png" /><input type="text" id="oReport2" style="margin-left: 20px; margin-top: 600px; width: 300px;" />
<!-- note that you don't have to contain a layer like this to constrain it. the DIV is only there so i can draw a border around it. -->
<div id="drag">
</div>
<img id="b" title="these special cursors are really annoying" style="position: absolute;
left: 462px; top: 166px; padding: 0px;-webkit-user-drag:element;"
src="2.png" />
<img id="g" title="please don't use them" style="position: absolute; left: 86px;
top: 241px; padding: 0px;-webkit-user-drag:element;" src="3.png" />
</div>
</form>
</body>
</html>
