The following Code (Initial Version)illustrates the drag and drop using JS(for I.E )to drop zone(table here).I'm using the x and y co-ordinates to trigger the drop event..so can be integrated with ajax for further process(can be some db persistence.)
<html>
<head>
<style>
.drago{position:relative;cursor:hand}
</style>
<script >
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drago"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=Trigger;
//-->
function Trigger(){
dragapproved=false
var x=event.clientX
var y=event.clientY
if(x>=12 && x<=319){
if(y>=77 && y<=124){
alert(event.srcElement.id +" placed on drop zone...call Ajax");
}
}
}
function display(){
x=event.clientX
y=event.clientY
document.getElementById("disp").innerHTML=x+":"+y;
}
</script>
</head>
<body>
<img src="sun1.png" id="pic1" class="drago"><br>
<img src="sun2.png" id="pic2" class="drago"><br>
<label class="drago" id="lbl">sample</label>
<table border=1 width="25%" onmouseover="display()">
<tr><td> </td></tr>
</table>
<div id="disp">
</div>
</body>
</html>
excuse me for styles and formating ;-)
No comments:
Post a Comment