Flytt elementer


Drag number ONE
Drag number TWO
Style og script mellom HEAD-taggene:
<style type=text/css>
.drag {
  width: 200px;
  height: 200px;
  position: absolute;
  border: 1px solid black;
  background: silver
}
</style>

<script type="text/javascript">
var ie = document.all
var ns = document.getElementById && !ie

function dragbyclass(e) {
  var fobj = ns ? e.target : event.srcElement
  if (fobj.tagName=="DIV" && fobj.className=="drag") {
   	var ev=e||event
   	var offsetx=ev.clientX-fobj.offsetLeft
   	var offsety=ev.clientY-fobj.offsetTop
  		document.onmousemove=function() {
    		fobj.style.left=ev.clientX-offsetx
    		fobj.style.top=ev.clientY-offsety
    		return false
  		}
  		fobj.onmouseup=function() {
   	 	document.onmousemove=null
   		}
  }
}
document.onmousedown=dragbyclass
</script>


Dette er de to "platene",-
du bruker de elementene og størrelsene du ønsker:
<div class="drag" style="left:40px;top:60px;z-index:100">
Drag number ONE</div> <div class="drag" style="left:40px;top:60px">Drag number TWO</div>