jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的實(shí)踐
更新時(shí)間：2021年04月09日 14:42:40 作者：As_zyh
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
實(shí)現(xiàn)類似windows窗體的效果，在中間拖動(dòng)改變div位置，在邊緣拖動(dòng)改變div大小，鼠標(biāo)在相應(yīng)的位置改變成相應(yīng)的形狀
效果如圖: （截圖沒顯示鼠標(biāo)）
代碼如下：
$(".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;
// 如果鼠標(biāo)在中間
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;
});
});
}
//如果鼠標(biāo)在左上角
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;
});
});
}
//如果鼠標(biāo)在上
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;
});
});
}
//如果鼠標(biāo)在右上角
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;
});
});
}
//如果鼠標(biāo)在右
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;
});
});
}
//如果鼠標(biāo)在右下
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;
});
});
}
//如果鼠標(biāo)在下
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;
});
});
}
//如果鼠標(biāo)在左下
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;
});
});
}
//如果鼠標(biāo)在左
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;
});
});
}
});
到此這篇關(guān)于jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的實(shí)踐的文章就介紹到這了,更多相關(guān)jQuery 鼠標(biāo)拖動(dòng)div內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)浮層功能示例【拖動(dòng)div等任何標(biāo)簽】
- jquery div拖動(dòng)效果示例代碼
- jQuery拖動(dòng)div、移動(dòng)div、彈出層實(shí)現(xiàn)原理及示例
- jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
- jquery拖動(dòng)改變div大小
- 使用jQuery的easydrag插件實(shí)現(xiàn)可拖動(dòng)的DIV彈出框
- jquery實(shí)現(xiàn)可拖動(dòng)DIV自定義保存到數(shù)據(jù)的實(shí)例
- jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法
相關(guān)文章
這篇文章主要介紹了jQuery中復(fù)合屬性選擇器用法,實(shí)例分析了復(fù)合屬性選擇器匹配同時(shí)滿足多個(gè)屬性條件元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jquery實(shí)現(xiàn)動(dòng)態(tài)改變div寬度和高度
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)改變div寬度和高度，效果非常不錯(cuò)，而且兼容性也很好，有需要的小伙伴可以參考下。2015-05-05
利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）
本篇文章主要對(duì)jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）的使用做了簡(jiǎn)要分析說(shuō)明。需要的朋友來(lái)看下吧，希望對(duì)大家有所幫助2016-12-12
基于jquery的獲取mouse坐標(biāo)插件的實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)的獲取mouse坐標(biāo)的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
本篇文章是對(duì)jQuery中的自動(dòng)完成組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
js實(shí)現(xiàn)的黑背景灰色二級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)的黑背景灰色二級(jí)導(dǎo)航菜單效果代碼,涉及javascript操作頁(yè)面元素動(dòng)態(tài)切換的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jquery easyui validatebox remote的使用詳解
下面小編就為大家?guī)?lái)一篇jquery easyui validatebox remote的使用詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery的ajax簡(jiǎn)單結(jié)構(gòu)示例代碼
這篇文章主要介紹了jquery的ajax簡(jiǎn)單結(jié)構(gòu),需要的朋友可以參考下2014-02-02
本篇文章主要介紹了ajax圖片上傳，圖片異步上傳，更新，具有一定的參考價(jià)值，有想去的可以了解一下。2016-12-12