chciałem zrobić bibliotekę - dla divów drag & drop
wygląda to wszystko tak
CZEŚĆ I - dodawanie usuwanie zdarzeń
właściwie niepotrzebna w temacie, ale jakby komuś się miało przydać, to jest tutaj całość
function eventUntil ()
{
this.addEvent = function(target, eventType, functionName)
{
if (target.addEventListener)
{
target.addEventListener(eventType, functionName, false);
}
else if (target.attachEvent)
target.attachEvent("on" + eventType, functionName);
else
target["on" + eventType] = dds;
}
this.removeEvent = function(target, eventType, functionName)
{
if (target.addEventListener)
target.removeEventListener(eventType, functionName, false);
else if (target.attachEvent)
target.detachEvent("on" + eventType, functionName);
else
target["on" + eventType] = null;
}
this.getEvent = function()
{
if (window.event)
{
return this.formatEvent(window.event);
}
else
{
return this.getEvent.caller.arguments[0];
}
}
this.formatEvent = function (eventType)
{
if (typeof eventType.charCode == "undefined")
{
eventType.charCode = (eventType.type == "keypress") ? eventType.keyCode : 0;
eventType.isChar = (eventType.charCode > 0);
}
if (eventType.srcElement && !eventType.target)
{
eventType.eventPhase = 2;
eventType.pageX = eventType.clientX + document.body.scrollLeft;
eventType.pageY = eventType.clientY + document.body.scrollTop;
if (!eventType.preventDefault)
{
eventType.preventDefault = function ()
{
this.returnValue = false;
};
}
if (eventType.type == "mouseout")
eventType.relatedTarget = eventType.toElement;
else if (eventType.type == "mouseover")
eventType.relatedTarget = eventType.fromElement;
if (!eventType.stopPropagation)
{
eventType.stopPropagation = function ()
{
this.cancelBubble = true;
};
}
eventType.target = eventType.srcElement;
eventType.time = (new Date).getTime();
}
return eventType;
};
}
CZĘŚĆ II - właściwy drag & drop
var dragNdrop =
{
elArray : new Array(),
initElements: false,
dragDiv : false,
container : false,
eUntil : new eventUntil(),
diffX : 0,
diffY : 0,
currentDiv : '',
initElement: function (dDiv,c)
{
dragDiv = this.checkElemetId(dDiv);
if(!c || typeof c =='undefined')
container = document.body;
else
container = this.checkElemetId(c);
initElements = dragDiv && container;
if(initElements)
{
if(!dragNdrop.elArray[dDiv] || typeof dragNdrop.elArray[dDiv] == 'undefined')
{
dragNdrop.elArray[dDiv] = dragDiv;
}
dragNdrop.eUntil.addEvent(dragNdrop.elArray[dDiv],"mousedown",dragNdrop.eventMouseDown);
}
else
{
}
},
eventMouseDown : function()
{
var eventType = dragNdrop.eUntil.getEvent();
dragNdrop.currentDiv = this.id;
diffX = eventType.clientX - dragNdrop.elArray[dragNdrop.currentDiv].offsetLeft;
diffY = eventType.clientY - dragNdrop.elArray[dragNdrop.currentDiv].offsetTop;
dragNdrop.eUntil.addEvent(container, "mousemove", dragNdrop.eventMouseMove);
dragNdrop.eUntil.addEvent(container, "mouseup", dragNdrop.eventMouseUp);
},
eventMouseMove : function()
{
var eventType = dragNdrop.eUntil.getEvent();
dragNdrop.elArray[dragNdrop.currentDiv].style.left = eventType.clientX - diffX;
dragNdrop.elArray[dragNdrop.currentDiv].style.top = eventType.clientY - diffY;
},
eventMouseUp : function()
{
dragNdrop.eUntil.removeEvent(container, "mousemove", dragNdrop.eventMouseMove);
dragNdrop.eUntil.removeEvent(container, "mouseup", dragNdrop.eventMouseUp);
},
checkElemetId : function (id)
{
if(document.getElementById(id))
return document.getElementById(id);
return false;
}
}
przykład wywołania
//np na onload
dragNdrop.initElement('div_1');
dragNdrop.initElement('div_2'); o ile pod FF działa to pod IE przywiesiłem się w miejscu
dragNdrop.currentDiv = this.id;chcę aby na mouseDown funkcja która gdzieś tam wcześniej została przypisana do tego diva odebrała id tego diva i aby wszystkie przeliczenia funkcje itd odnosiły się do tego diva, a nie np do ostatniego zainicjalizowanego
pod IE this.id to undefined i nie mam pojęcia jak zrobić aby było dobrze