<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#dragArea {
position: relative;
width: 600px;
height: 400px;
border: 1px solid #000;
}
.drag-item {
position: absolute;
width: 100px;
height: 80px;
cursor: move;
}
.red {
background: red;
}
.blue {
background: blue;
left: 220px;
top: 170px;
}
</style>
<script type="text/javascript">
// X-Browser Event handler objekt
var Evnt = (function(){
return (document.addEventListener ? {
add: function(obj, type, fn) {
obj.addEventListener(type, fn, false);
},
rem: function(obj, type, fn) {
obj.removeEventListener(type, fn, false);
}
} : {
add: function(obj, type, fn) {
obj.attachEvent("on"+type, fn);
},
rem: function(obj, type, fn) {
obj.detachEvent("on"+type, fn);
}
});
})();
var objCont = null, objDrag = null, pointClick = null;
function mDown(evnt, elm) {
objDrag = document.elementFromPoint(evnt.clientX, evnt.clientY);
if (objDrag.className.indexOf("drag-item")<0) return objDrag = null;
objDrag = {
elm: objDrag,
w: objDrag.offsetWidth,
h: objDrag.offsetHeight
};
objCont = {
elm: elm,
w: elm.clientWidth,
h: elm.clientHeight
};
pointClick = {x:evnt.clientX-objDrag.elm.offsetLeft, y:evnt.clientY-objDrag.elm.offsetTop};
if (evnt.preventDefault) evnt.preventDefault();
evnt.returnValue = false;
}
function mMove(evnt) {
if (!objDrag) return;
evnt = evnt ? evnt : event;
var css = objDrag.elm.style,
nX = evnt.clientX-pointClick.x,
nY = evnt.clientY-pointClick.y,
oX = objDrag.elm.offsetLeft,
oY = objDrag.elm.offsetTop;
if (Math.abs(oX-nX)>10) {
nX = Math.round(nX/10)*10;
if (nX>=0 && nX+objDrag.w<=objCont.w) css.left = nX + "px";
}
if (Math.abs(oY-nY)>10) {
nY = Math.round(nY/10)*10;
if (nY>=0 && nY+objDrag.h<=objCont.h) css.top = nY + "px";
}
}
function mUp(evnt) {
objDrag = objCont = null;
}
function initDrag() {
Evnt.add(document, "mousemove", mMove);
Evnt.add(document, "mouseup", mUp);
Evnt.rem(window, "load", initDrag);
}
Evnt.add(window, "load", initDrag);
</script>
</head>
<body>
<div style="padding:200px">
<div id="dragArea" onmousedown="mDown(event, this)">
<div class="drag-item red"></div>
<div class="drag-item blue"></div>
</div>
</div>
</body>
</html>
