<html>
<body>
<script type="text/javascript">
function fixEvent(e) {
e = e || window.event
if ( e.pageX == null && e.clientX != null ) {
var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
}
if (!e.which && e.button) {
e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
}
return e
}
var dragMaster = (function() {
// private методы и свойства
var dragObject
var dropTarget
function mouseDown(e) {
e = fixEvent(e)
dragObject=e.target
dragObject.x=e.pageX
dragObject.y=e.pageY
return false
}
function mouseMove(e){
var elem
e = fixEvent(e)
if (dragObject)
{
if (document.elementFromPoint(e.pageX,e.pageY))
if (document.elementFromPoint(e.pageX,e.pageY).className==dragObject.className){
elem=document.elementFromPoint(e.pageX,e.pageY)
if (!dropTarget) dropTarget=elem
}
else {elem=null}
//если клик
if (Math.abs(dragObject.x-e.pageX)<5 && Math.abs(dragObject.y-e.pageY)<5) return false
dragObject.style.backgroundColor="Red"
if (elem)
if (dropTarget!=elem)
{
if ( dropTarget!=dragObject) dropTarget.style.backgroundColor=""
dropTarget=elem
if ( dropTarget!=dragObject) dropTarget.style.backgroundColor="Lime"
}
}
return false
}
function mouseUp(e){
var inner
if (dropTarget &&dragObject) {
dropTarget.style.backgroundColor=""
dragObject.style.backgroundColor=""
inner=dragObject.innerHTML
dragObject.innerHTML=dropTarget.innerHTML
dropTarget.innerHTML=inner
}
dragObject=null
dropTarget=null
return false
}
// public методы и свойства
return {
makeDraggable: function(element){
element.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp }
}
}())
</script>
<style>
.uponMe { background-color: red; }
</style>
<table height="300px" width="100%" id="dragObjects" border="1" cellspacing="0" celpadding="20">
<tr><td class="dragHandle">1+111</td>
<td class="dragHandle">2+222</td>
<td class="dragHandle">3+333</td></tr><tr>
<td class="dragHandle">4+444</td>
<td class="dragHandle">5+555</td>
<td class="dragHandle">6+666</td> </tr>
</table>
<script type="text/javascript">
var dragObj
onload = function() {
dragObj = document.getElementById('dragObjects')
dragMaster.makeDraggable(dragObj)
}
</script>
</body>
</html>
в ИЕ не работает(
