CODEWITHSUNDEEP
javascripthtmldommouseeventaddeventlistener
Soggeh
Soggeh

Reputation: 111

Include HTML DOM into addEventListener()

I am trying to create a simple drag and resize system and I am having problems with adding event listeners to my dividers. Instead of adding the horrendous amount of event listeners to my HTML to every single divider with the class "draggablePanel":

<div id="content">
    <div class="draggablePanel" onmousedown='dragShift.dragStart(this,this.parentElement,event)' onmouseup='dragShift.dragEnd(this.parentElement); dragShift.dragHover(this,this.parentElement,event)' onmouseenter= 'dragShift.dragHover(this,this.parentElement,event)' onmouseleave='dragShift.dragEnd(this.parentElement),dragShift.dragLeave(this.parentElement)';>
        Content
    </div>
</div>

I'm trying to use addEventListeners() for the job:

function addDragPanels(panelArrayName) {    //Add the mouse event listeners to draggable panels
    if (document.getElementsByClassName) {     //Access every divider with the "draggablePanel" class
        var divEle;
        var draggablePanels = document.getElementsByClassName(panelArrayName);
        for(var ctr=0;ctr<draggablePanels.length;ctr++){
            divEle = draggablePanels[ctr];
            divEle.addEventListener('mousedown', dragShift.dragStart(this,this.parentElement,event),false);     //How do i go about editing this?
            divEle.addEventListener('mouseup', dragShift.dragEnd( .... etc              
        }
    }
}

if (document.readyState === "complete") {
    addDragPanels("draggablePanel");
}

Basically, I am using three arguments: this,this.parentElement,event. How do I correctly pass these arguments using Javascript when I am using addEventListener()? I need the "event" argument to track mouse position in my dragging Javascript functions.

Thanks in advance for any help rendered. Sorry if this question is stupid has been asked before but I just couldn't find the solution anywhere (or maybe I don't know where and what to look).

Upvotes: 1

Views: 112

Answers (1)

Sandipan Guha
Sandipan Guha

Reputation: 126

Where you get this 'dragShift' element? Please refer me to the source.

Some browsers don't support 'addEventListener()'. Hence, you can use:

divEle.onmousedown = function(){dragShift.dragstart(this,this.parentElement,event);};

or make an anonymous function then put it inside:

divEle.addEventListener('mouseup',function(){dragShift.dragStart(this,this.parentElement,event);},false);

Please let me know if any of it works!

Upvotes: 2

Related Questions