Sí, lo que estaba dentro de la capa también se arrastraba. En Firefox se arreglaba fácil, usando e.currentTarget y comparándolo con e.target (era un buen ejemplo de que no siempre son lo mismo), pero en explorer no encontré la manera de hacerlo, así que tuve que apelar a agregarle un atributo rel a los objetos arrastrables. Fue un ejercicio entretenido. Al final quedó así:
ver ejemplo
Y este es el código:
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>test</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);
} 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;
}
}
function getElementsByRelName(rel){
var col=[];
var tCol=document.getElementsByTagName('*');
for(var i=0;i<tCol.length;i++)
if(tCol[i].getAttribute('rel')==rel)
col.push(tCol[i].id)
return col;
}
Array.prototype.in_array=function(){
for(var j in this){
if(this[j]==arguments[0]){
return true;
}
}
return false;
}
function getNextHighestDepth(){
var tCol=document.getElementsByTagName('*');
var z=0;
for(var i=0;i<tCol.length;i++){
if(tCol[i].style.zIndex>z){
z=tCol[i].style.zIndex;
}
}
return ++z;
}
//fin lib
arrastrable={};
function mover(e){
e=e || window.event;
o=e.srcElement || e.target;
if(!arrastrable.coleccion.in_array(o.id)){
if(arrastrable.coleccion.in_array(o.parentNode.id))
o=o.parentNode;
}
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){
arrastrable.coleccion=getElementsByRelName('arrastrables');
e=e || window.event;
o=e.srcElement || e.target;
if(!arrastrable.coleccion.in_array(o.id)){
if(arrastrable.coleccion.in_array(o.parentNode.id))
o=o.parentNode;
}
if(o.position!="relative"||!o.style.position){
o.style.position="relative";
o.style.cssFloat="none";
o.style.zIndex=getNextHighestDepth();
}
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);
}
function makeDraggable(){
for(var j=0;j<arguments.length;j++){
$(arguments[j]).setAttribute('rel','arrastrables');
$(arguments[j]).style.cursor='move';
addEvent($(arguments[j]), 'mousedown',i, false);
}
}
window.onload=function(){
makeDraggable('pp','qq');
}
</script>
</head>
<body>
<div id="qq" style="background-color:#FF0000; width:100px; height:100px; color:#FFFFFF">test<br />
<img src="e1.gif" /></div>
<p style="border:1px solid #333333"><img id="pp" src="tres.jpg" width="180" height="144" /></p>
</body>
</html>
Algo que me parece curioso y que me hace dudar acerca de las ventajas de las nuevas formas de asignar eventos es que si simplificamos estas funciones de esta manera, todo funciona exactamente igual:
Código PHP:
function addEvent(obj, evType, fn){
obj['on'+evType]=fn;
}
function removeEvent(obj, evType){
obj['on'+evType]=function(){};
}
Saludos y Felicidades anticipadas!