实现类似windows窗体的效果，在中间拖动改变div位置，在边缘拖动改变div大小，鼠标在相应的位置改变成相应的形状
效果如图: （截图没显示鼠标）
代码如下：
$( ".test1" ).mousemove( function (e){
$( ".test1" ).unbind( "mousedown" );
$( ".test1" ).css( "cursor" , "default" );
//$("span > b").text(parseInt($("div").width()));
var left = $( ".test1" ).offset().left;
var top = $( ".test1" ).offset().top;
// 如果鼠标在中间
if (e.clientX - left > 10 && e.clientX-left < parseInt($( ".test1" ).width()) - 10
&& e.clientY - top > 10 && e.clientY-top < parseInt($( ".test1" ).height()) - 10) {
$( ".test1" ).css( "cursor" , "move" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var x = e.pageX - $( ".test1" ).offset().left;
var y = e.pageY - $( ".test1" ).offset().top;
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "left" :e.pageX - x, "top" :e.pageY - y});
}
}).mouseup( function () {
ismove = false ;
});
});
}
//如果鼠标在左上角
if (e.clientX - left < 10 && e.clientY - top < 10) {
$( ".test1" ).css( "cursor" , "nw-resize" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var y = e.pageY - $( ".test1" ).offset().top;
var h = e.pageY + parseInt($( ".test1" ).css( "height" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "height" :h - e.pageY, "top" :e.pageY - y});
}
}).mouseup( function () {
ismove = false ;
});
});
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var x = e.pageX - $( ".test1" ).offset().left;
var w = e.pageX + parseInt($( ".test1" ).css( "width" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "width" :w - e.pageX, "left" :e.pageX - x});
}
}).mouseup( function () {
ismove = false ;
});
});
}
//如果鼠标在上
if (e.clientY - top < 10 && e.clientX - left > 10 && e.clientX-left < parseInt($( ".test1" ).width()) - 10) {
$( ".test1" ).css( "cursor" , "n-resize" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var y = e.pageY - $( ".test1" ).offset().top;
var h = e.pageY + parseInt($( ".test1" ).css( "height" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "height" :h - e.pageY, "top" :e.pageY - y});
}
}).mouseup( function () {
ismove = false ;
});
});
}
//如果鼠标在右上角
if (e.clientY - top < 10 && e.clientX-left > parseInt($( ".test1" ).width()) - 10) {
$( ".test1" ).css( "cursor" , "ne-resize" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var y = e.pageY - $( ".test1" ).offset().top;
var h = e.pageY + parseInt($( ".test1" ).css( "height" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "height" :h - e.pageY, "top" :e.pageY - y});
}
}).mouseup( function () {
ismove = false ;
});
});
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var x = e.pageX - $( ".test1" ).offset().left;
var w = e.pageX - parseInt($( ".test1" ).css( "width" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "width" :e.pageX - w});
}
}).mouseup( function () {
ismove = false ;
});
});
}
//如果鼠标在右
if (e.clientX-left > parseInt($( ".test1" ).width()) - 10 && e.clientY - top > 10 && e.clientY-top < parseInt($( ".test1" ).height()) - 10) {
$( ".test1" ).css( "cursor" , "e-resize" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var x = e.pageX - $( ".test1" ).offset().left;
var w = e.pageX - parseInt($( ".test1" ).css( "width" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "width" :e.pageX - w});
}
}).mouseup( function () {
ismove = false ;
});
});
}
//如果鼠标在右下
if (e.clientX-left > parseInt($( ".test1" ).width()) - 10 && e.clientY-top > parseInt($( ".test1" ).height()) - 10) {
$( ".test1" ).css( "cursor" , "se-resize" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var x = e.pageX - $( ".test1" ).offset().left;
var w = e.pageX - parseInt($( ".test1" ).css( "width" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "width" :e.pageX - w});
}
}).mouseup( function () {
ismove = false ;
});
});
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var y = e.pageY - $( ".test1" ).offset().top;
var h = e.pageY - parseInt($( ".test1" ).css( "height" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "height" :e.pageY - h});
}
}).mouseup( function () {
ismove = false ;
});
});
}
//如果鼠标在下
if (e.clientY-top > parseInt($( ".test1" ).height()) - 10 && e.clientX - left > 10 && e.clientX-left < parseInt($( ".test1" ).width()) - 10) {
$( ".test1" ).css( "cursor" , "s-resize" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var y = e.pageY - $( ".test1" ).offset().top;
var h = e.pageY - parseInt($( ".test1" ).css( "height" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "height" :e.pageY - h});
}
}).mouseup( function () {
ismove = false ;
});
});
}
//如果鼠标在左下
if (e.clientY-top > parseInt($( ".test1" ).height()) - 10 && e.clientX - left < 10) {
$( ".test1" ).css( "cursor" , "sw-resize" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var x = e.pageX - $( ".test1" ).offset().left;
var w = e.pageX + parseInt($( ".test1" ).css( "width" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "width" :w - e.pageX, "left" :e.pageX - x});
}
}).mouseup( function () {
ismove = false ;
});
});
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var y = e.pageY - $( ".test1" ).offset().top;
var h = e.pageY - parseInt($( ".test1" ).css( "height" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "height" :e.pageY - h});
}
}).mouseup( function () {
ismove = false ;
});
});
}
//如果鼠标在左
if (e.clientX - left < 10 && e.clientY - top > 10 && e.clientY-top < parseInt($( ".test1" ).height()) - 10) {
$( ".test1" ).css( "cursor" , "w-resize" );
$( ".test1" ).mousedown( function (e) {
var ismove = true ;
var x = e.pageX - $( ".test1" ).offset().left;
var w = e.pageX + parseInt($( ".test1" ).css( "width" ));
$(document).mousemove( function (e) {
if (ismove) {
$( ".test1" ).css({ "width" :w - e.pageX, "left" :e.pageX - x});
}
}).mouseup( function () {
ismove = false ;
});
});
}
});
到此这篇关于jQuery实现鼠标拖动div改变位置、大小的实践的文章就介绍到这了,更多相关jQuery 鼠标拖动div内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://blog.csdn.net/As_zyh/article/details/115529935
查看更多关于jQuery实现鼠标拖动div改变位置、大小的实践的详细内容...