32
« en: 31 de Octubre de 2009, 18:10:27 pm »
Hola, he creado de 0 un drag & drop k me esta costtando bastante...
El codigo es mas extenso de lo normal porque lo ajusta a una "cuadricula" que es el fondo, a traves de una funcion moveTo que lo mueve poco a poco xD.
Con firefox va de putilingis madre, pero con IE no se mueve.
Segun IE si coge los atributos de mover y parar, pero no los ejecuta (el onmousemove y out)
Dejo el codigo:
<script type="text/javascript">
function moveTo(el, top, left) {
if(typeof el == 'string') {
var element = document.getElementById(el);
} else {
var element = el;
}
var nTop, nLeft;
if(element.offsetTop > top) {
nTop = (element.offsetTop-10);
if(nTop < top) { nTop = top; }
} else {
nTop = (element.offsetTop+10);
if(nTop > top) { nTop = top; }
}
if(element.offsetLeft > left) {
nLeft = (element.offsetLeft-10);
if(nLeft < left) { nLeft = left; }
} else {
nLeft = (element.offsetLeft+10);
if(nLeft > left) { nLeft = left; }
}
element.style.top = nTop + 'px';
element.style.left = nLeft + 'px';
if(nTop != top || nLeft != left) {
if(typeof element.id == 'undefined' || element.id == null || element.id == '') { element.setAttribute('id', 'drag' + ++dragId); }
setTimeout("moveTo('" + element.id + "', " + top + ", " + left + ");", 10);
}
}
// offset
function getoffsetTop(el) {
if(typeof el == 'string') {
var element = document.getElementById(el);
} else {
var element = el;
}
if(!element.parentNode) { return element.offsetTop; }
var parent, top;
parent = element.parentNode;
top = element.offsetTop;
while(parent.tagName.toLowerCase() != 'body') {
top = (top+parent.offsetTop);
parent = parent.parentNode;
}
return top;
}
function getoffsetLeft(el) {
if(typeof el == 'string') {
var element = document.getElementById(el);
} else {
var element = el;
}
if(!element.parentNode) { return element.offsetLeft; }
var parent, left;
parent = element.parentNode;
left = element.offsetLeft;
while(parent.tagName.toLowerCase() != 'body') {
left = (left+parent.offsetLeft);
parent = parent.parentNode;
}
return left;
}
var difX, difY, dragId, dMove, dUp, dOut, dDown;
dragId = 0;
dMove = '';
dUp = '';
dOut = '';
function start_drag(element) {
if(typeof element.id == 'undefined' || element.id == null || element.id == '') { element.setAttribute('id', 'drag' + ++dragId); }
difX = (element.offsetLeft-Xpos);
difY = (element.offsetTop-Ypos);
dMove = element.parentNode.getAttribute('onmousemove');
dUp = element.parentNode.getAttribute('onmouseup');
dOut = element.parentNode.getAttribute('onmouseout');
if(typeof dMove == 'undefined' || dMove == null) { dMove = ''; }
if(typeof dUp == 'undefined' || dUp == null) { dUp = ''; }
if(typeof dOut == 'undefined' || dOut == null) { dOut = ''; }
<!-- ESTO DE ABAJO ES LO K DEBERIA EJECUTAR EL ONMOUSEMOVE Y ONMOUSEUP -->
element.parentNode.setAttribute('onmousemove', dMove + 'move_drag(\'' + element.id + '\');');
element.parentNode.setAttribute('onmouseup', dUp + 'end_drag(\'' + element.id + '\');');
element.setAttribute('onmouseout', dOut + 'end_drag(\'' + element.id + '\');');
}
function end_drag(id) {
var element, parent;
element = document.getElementById(id);
parent = element.parentNode;
parent.onmousemove = dMove;
parent.onmouseup = dUp;
element.onmouseout = dOut;
cTop = getoffsetTop(parent);
cLeft = getoffsetLeft(parent);
top = element.offsetTop;
if(top < cTop) { top = cTop; }
if(top > parseInt(cTop+parseInt(parent.style.height))) { top = parseInt(cTop+parseInt(parent.style.height)-parseInt(element.style.height)); }
left = element.offsetLeft;
if(left < cLeft) { left = cLeft; }
if(left > (cLeft+parseInt(parent.style.width))) { left = parseInt(cLeft+parseInt(parent.style.width)-parseInt(element.style.width)); }
var f1, f2;
if(top > cTop && top <= parseInt(cTop+parseInt(parent.style.height)) && parseInt(top-cTop) % 21 != 0) {
for(i=1;i<=21;i++) {
if(parseInt(top-cTop-i) % 21 == 0) { f1 = i; break; }
}
for(i=1;i<=21;i++) {
if(parseInt(top-cTop+i) % 21 == 0) { f2 = i; break; }
}
if(f1 < f2) {
top = parseInt(top-f1);
} else {
top = parseInt(top+f2);
}
}
if(left > cLeft && left <= parseInt(cLeft+parseInt(parent.style.width)) && parseInt(left-cLeft) % 21 != 0) {
for(i=1;i<=21;i++) {
if(parseInt(left-cLeft-i) % 21 == 0) { f1 = i; break; }
}
for(i=1;i<=21;i++) {
if(parseInt(left-cLeft+i) % 21 == 0) { f2 = i; break; }
}
if(f1 < f2) {
left = parseInt(left-f1);
} else {
left = parseInt(left+f2);
}
}
if(top != element.offsetTop || left != element.offsetLeft) { moveTo(element, top, left); }
}
function move_drag(id) {
var top, left, element;
element = document.getElementById(id);
top = (Ypos+difY);
left = (Xpos+difX);
element.style.top = top + 'px';
element.style.left = left + 'px';
}
var ie = (document.getElementById && document.all);
var ns = (document.getElementById && !document.all);
var Xpos, Ypos;
function getMouse(e){
if(document.getElementById){
Xpos= (ie)?event.x:(ns)?clientX=e.clientX:false;
Ypos= (ie)?event.y:(ns)?clientY=e.clientY:false;
}
}
document.onmousemove = getMouse;
</script>
<div style="width:526px;height:169px;background-image:url(images/inv_bg.png);background-position:left top;"><div style="background-color:red;width:105px;height:105px;position:absolute;z-index:9999;cursor:move;" onmousedown="start_drag(this);return false;"></div></div>
Mostrar Mensajes