Сегодня на работе делать было нефиг, решил написать простенький скрипт D&D.
Вышло вроде неплохо.
Тестировал под IE7, IE6, Chrome 1.0.154.48, Opera 964, FireFox 307.
Фишка еще что под всеми броузерами нормально таскает <img> и учитывает скрол.
Сделал его легко разбираемым и без наворотов. мб для кого нибудь окажется полезным, мб кто-то поправит или исправит меня =)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<script type="text/javascript" language="javascript">
/************COMON**************/
function getEvent(e)
{if (document.all)return event;else return e;}
function getObjFromEvent(e)
{if (document.all)return e.srcElement;else return e.target;}
/*******************************/
var dragEl = false;
var dragElParent = false;
var clickX = false;
var clickY = false;
function start()
{
simpleDrag(document.getElementById("drag1"));
simpleDrag(document.getElementById("drag2"));
dragInParent(document.getElementById("drag3"));
}
function simpleDrag(o)
{o.onmousedown = simple;}
function dragInParent(o)
{o.onmousedown = inParent;}
function dSimpleDrag(o)
{o.onmousedown = null;}
function inParent(e)
{
dragElParent = getObjFromEvent(getEvent(e)).parentNode;
startDrag(e);
}
function simple(e)
{
startDrag(e);
}
function drag(e)
{
var eObj = getEvent(e);
var newX = eObj.clientX - clickX;
var newY = eObj.clientY - clickY;
if(dragElParent)
{
if( 0 <= newX && dragElParent.offsetWidth >= ( newX + dragEl.offsetWidth ) )
dragEl.style.left = newX + "px";
else if(0 > newX)
dragEl.style.left = 0;
else if(dragElParent.offsetWidth - parseInt(dragElParent.style.left) < newX + dragEl.offsetWidth)
dragEl.style.left = dragElParent.offsetWidth - dragEl.offsetWidth + "px";
if( 0 <= newY && dragElParent.offsetHeight >= ( newY + dragEl.offsetHeight ) )
dragEl.style.top = newY + "px";
else if(0 > newY)
dragEl.style.top = 0;
else if(dragElParent.offsetHeight - parseInt(dragElParent.style.top) < newY + dragEl.offsetHeight)
dragEl.style.top = dragElParent.offsetHeight - dragEl.offsetHeight + "px";
// dragEl.innerHTML = newX +":"+ newY + "<br/>" + dragEl.style.left + ":" + dragEl.style.top;
}
else
{
dragEl.style.left = newX + "px";
dragEl.style.top = newY + "px";
}
}
function startDrag(e)
{
document.onmouseup = stopDrag;
var eObj = getEvent(e);
dragEl = getObjFromEvent(eObj);
dragEl.style.MozUserSelect = "none";
dragEl.ondragstart = dragEl.onselectstart = function(){return false;}
clickX = eObj.clientX - parseInt(dragEl.style.left) - document.body.scrollLeft;
clickY = eObj.clientY - parseInt(dragEl.style.top) - document.body.scrollTop;
document.onmousemove = drag;
if (e && dragEl.tagName.match(/img/gi))
e.preventDefault();
else if(dragEl.tagName.match(/img/gi))
eObj.returnValue= false;
return false;
}
function stopDrag()
{
document.onmousemove = null;
document.onmouseup = null;
if(dragEl)
{
dragEl.ondragstart = dragEl.onselectstart = null;
dragEl.style.MozUserSelect = "all";
dragEl = false;
dragElParent = false;
clickX = false;
clickY = false;
}
}
</script>
</head>
<body onload="start();" style="padding:0;margin:0;">
<div style="width:500px; height:600px; background-color: green; position:absolute; top:60px; left:100px;">
<div id="drag3" style="width:100px; height:100px; background-color:red; position: absolute; top:50px; left:100px;">Вытащи меня за зеленое поле :P</div>
</div>
<div id="drag1" style="width:100px; height:100px; background-color:red; position: relative; top:50px; left:1000px;">Попробуй перетащить меня или лого яндекса. ;)</div>
<img id="drag2" src="http://ya.ru/logo.png" style="position: absolute; top:200px; left:900px;"/>
</body>
</html>
Подключаем скрипт файлом. Чтобы сделать какой либо объект подвижным используем функцию simpleDrag(obj); илиdragInParent(obj);(позициониров ние объекта заведомо должно быть relative или absolute)