Hola, Pepe, yo hice esta
prueba cun una capa y con una imagen, y ambas se comportan de la misma manera.
El código que usé es este:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
//inicio lib
function $(id){
return document.getElementById(id);
}
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
} else if (obj.attachEvent){
obj.attachEvent("on"+evType, fn);
} else {
obj['on'+evType]=fn;
}
}
function removeEvent(obj, evType, fn, useCapture){
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, useCapture);
return true;
} else if (obj.detachEvent){
obj.detachEvent("on"+evType, fn);
} else {
obj['on'+evType]=function(){};
}
}
function stopEvent(e) {
if (!e) e = window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
function cancelEvent(e) {
if (!e) e = window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
//fin lib
arrastrable={};
function mover(e){
e=e || window.event;
o=e.srcElement || e.target;
arrastrable.c2x=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
arrastrable.c2y=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
o.style.left=arrastrable.c2x-arrastrable.c1x+arrastrable.o1x+'px';
o.style.top=arrastrable.c2y-arrastrable.c1y+arrastrable.o1y+'px';
cancelEvent(e);
stopEvent(e);
}
function detener(){
removeEvent(document, 'mousemove', mover, false);
removeEvent(document, 'mouseup', detener, false);
}
function i(e){
e=e || window.event;
o=e.srcElement || e.target;
if(o.position!="relative"||!o.style.position){
o.style.position="relative";
o.style.float="none";
}
arrastrable.c1x=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
arrastrable.c1y=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;
arrastrable.o1x=!isNaN(parseInt(o.style.left))?parseInt(o.style.left):0;
arrastrable.o1y=!isNaN(parseInt(o.style.top))?parseInt(o.style.top):0;
addEvent(document, 'mousemove',mover, false);
addEvent(document, 'mouseup',detener, false);
cancelEvent(e);
stopEvent(e);
}
window.onload=function(){
addEvent($('pp'), 'mousedown',i, false);
addEvent($('qq'), 'mousedown',i, false);
}
</script>
</head>
<body>
<div id="qq" style="background-color:#FF0000; width:100px; height:100px; color:#FFFFFF">test</div>
<img id="pp" src="tres.jpg" width="180" height="144" />
</body>
</html>
Básicamente, el arrastre de la imagen se hizo fluído al agregar estas 2 líneas en la función que maneja el evento mousedown:
Código PHP:
cancelEvent(e);
stopEvent(e);