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