Ok kul, och vad är din fråga?
Frågan#1
Om man använder sig av nedanstående kod, kan man då på ett relativt lätt och smidigt sätt ta reda på var bilderna är placerade och få deras koordinater. Koordinaterna ska sedan sparas i en databas för att senare hämtas och placera bilden på exakt samma ställe.
Håller på med en sida till en fotbolls förening.
Tanken är att man skall skriva in en matchrapport och sen placera ut spelare på en fotbollsplan så som start ellvan såg ut.
Sen skall besökarna kunna gå in och se hur start uppställningen såg ut.
KOD:
<html>
<head>
<style type="text/css">
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>
</head>
<body>
<img src="test.gif" class="drag"><br>
<img src="test2.gif" class="drag"><br>
<h1><b>"Hi there</b></h1>
</body>
</html>