how to run a function only for the clicked element and not for the whole class

Question

I am looking for a way to resize individually several div on a page (like a browser window, that you can resize from a bottom corner), keeping the same proportions/ratio. I made the code work for a class .handle and .dragger, but all the div with the same class are being modified at the same time, while I would like it to be executed only for the div we click on.

Here is the code to resize that I'm working with:

    $(".handle").bind('mousedown', draggerDown);
    $("body").bind('mouseup', draggerUp);

    function calculateNewSize(size) {
        // {currHeight, currWidth, newHeight, newWidth, offsetX, offsetY}
        
        var newWidth;
        var newHeight;

        if (Math.abs(size.offsetX) > Math.abs(size.offsetY)) {
            newWidth = size.currWidth + size.offsetX;
            newHeight = newWidth * (size.currHeight / size.currWidth);
        } else {
            newHeight = size.currHeight + size.offsetY;
            newWidth = newHeight * (size.currWidth / size.currHeight);
        }

        return {
            "height": newHeight,
            "width": newWidth
        };
    }

    function draggerDown() {
        event.stopPropagation();
        event.preventDefault();

        currentX = event.pageX;
        currentY = event.pageY;
        
        currentHeight = $(".dragger").height();
        currentWidth = $(".dragger").width();

        $("body").bind('mousemove', draggerMove);
    }

    function draggerMove() {
        var draggerElements = document.getElementsByClassName("dragger");
        for (var n = 0; n < draggerElements.length; ++n) {

        var targetStyle = window.getComputedStyle(draggerElements[n], null);
        var newHeight = currentHeight + (event.pageY - currentY);
        var newWidth = currentWidth + (event.pageX - currentX);
        
        // AT THIS POINT, THE LOGIC COMES IN.
        // CUSTOMIZE 'calculateNewSize' function above

        var newSize = calculateNewSize({
            "currHeight": currentHeight,
            "currWidth": currentWidth,
            "newHeight": newHeight,
            "newWidth": newWidth,
            "offsetX": (event.pageX - currentX),
            "offsetY": (event.pageY - currentY)
        });
        
        currentHeight = newSize.height;
        currentWidth = newSize.width;
        
        newHeight = newSize.height;
        newWidth = newSize.width;

        // AT THIS POINT, THE LOGIC IS DONE.
        // SIZES SHOULD BE COOL NOW

        $(".dragger").css("height", newHeight + "px");
        $(".dragger").css("width", newWidth + "px");
        
        console.log($(".dragger").height());

        currentX = event.pageX;
        currentY = event.pageY;
    }
    }
    function draggerUp() {
        $("body").unbind('mousemove');
    }


      // tell the embed parent frame the height of the content
      if (window.parent && window.parent.parent){
        window.parent.parent.postMessage(["resultsFrame", {
          height: document.body.getBoundingClientRect().height,
          slug: "xUAZ5"
        }], "*")
      }

      // always overwrite window.name, in case users try to set it manually
      window.name = "result"
}

I am trying to do it with that methodology (from another project) but I don't really know if it could work with the previous code:

var u; 

for(var i=1; i<13; i++) {
    var specificClass= document.getElementsByClassName("class"+i);

    for (u = 0; u < specificClass.length; u++) {
        specificClass[u].addEventListener("click", thefunction);
    }
}

function thefunction(evenement) {
//    alert(evenement.target.classList)
    var clickedElement = document.getElementsByClassName(evenement.target.classList);
    for (u = 0; u < clickedElement.length; u++) {
        clickedElement[u].style etc.
    }
}

In that case I would these two groups of class: handle1, handle2, handle3,... and dragger1, dragger2, dragger3...

Here is my simplified html body:

Any other methodology is very welcomed of course, this is only what I've been trying :) Let me know if you would need more details Thanks!

how to run a function only for the clicked element and not for the whole class

0 Answers