溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的操作”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的操作”吧!
實(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;
});
});
}
});到此，相信大家對“jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的操作”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼