如何处理div中调整大小的开始?

时间:2013-11-16 19:19:23

标签: javascript jquery html5 resize

我正试图在拖动开始时调用一个函数,但我不能,这个div无法处理调整大小图标区域上的click或mousedown事件,所以我不得不在mouseover事件上处理它。

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);
    }
});

1 个答案:

答案 0 :(得分:0)

好的,我做到了:

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;
});