How to handle the beginning of resize in a div?

Question

I'm trying to call a function right at the start of dragging but I can't, this div can't handle click or mousedown events on the resize icon area so I'm forced to handle it on mouseover event.

http://jsfiddle.net/PLBT6/

HTML

<div>hey</div>

CSS

div{
    width:30%;
    border:4px solid green;
    resize:horizontal;
    overflow:hidden;
}

Javascript

$("div").on("mousemove.resizer",function(e) {
    var draggingstarted = false;
    var bottom = $(this).offset().top + $(this).outerHeight();
    var right = $(this).offset().left + $(this).outerWidth();

    if (e.pageY<bottom-3 && e.pageY>bottom-16
        && e.pageX<right-3 && e.pageX>right-16){
        if (draggingstarted){
            console.log("started dragging");
        } else if (e.which==1) draggingstarted=true; //left click
        //else if (e.which==0) draggingstarted=false; //no clicks
        console.log(e.which, draggingstarted);
    }
});

Possible dup: http://stackoverflow.com/questions/5570390/resize-event-for-textarea — megawac, Nov 16 '13 at 20:01
@megawac I can handle resize but I cant handle the beginning of the resize event. — shuji, Nov 16 '13 at 20:03
migth help http://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events — charlietfl, Nov 16 '13 at 20:03
Sure, if you want to use a resizer you're gonna probably need a plugin — megawac, Nov 16 '13 at 20:04
using plugin will be best approach for cross browser compatability — charlietfl, Nov 16 '13 at 20:05

shuji · Accepted Answer · 2013-11-16T21:30:43.617

Ok, I made it:

http://jsfiddle.net/PLBT6/1/

var ready = false; //entered with no clicks
$("div").on("mousemove",function(e) {
    var bottom = $(this).offset().top + $(this).outerHeight();
    var right = $(this).offset().left + $(this).outerWidth();

    if (e.pageY<bottom-3 && e.pageY>bottom-16 && e.pageX<right-3 && e.pageX>right-16){
        if (e.which==1 && ready) {console.log("drag started");ready=false;} //left click
        else if (e.which==0) {console.log("ready");ready=true;} //no clicks
    } else ready=false;
});
$("div").on("mouseout",function(e) {
    ready=false;
});

How to handle the beginning of resize in a div?

1 Answers1