jQuery實現(xiàn)鼠標(biāo)拖動div改變位置、大小的實踐
更新時間：2021年04月09日 14:42:40 作者：As_zyh
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)拖動div改變位置、大小的實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
實現(xiàn)類似windows窗體的效果，在中間拖動改變div位置，在邊緣拖動改變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實現(xiàn)鼠標(biāo)拖動div改變位置、大小的實踐的文章就介紹到這了,更多相關(guān)jQuery 鼠標(biāo)拖動div內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
鼠標(biāo)在搜索框中點擊的時候里面的文字就消失了，經(jīng)常會用到搜索框的獲得焦點和失去焦點的事件，接下來介紹一下具體代碼，感興趣的朋友額可以參考下2013-04-04
如何解決jQuery EasyUI 已打開Tab重新加載問題
最近在項目中遇到這樣的需求，要求實現(xiàn)點擊左側(cè)已經(jīng)打開的tab可以刷新重新加載datagrid。下面給大家分享實現(xiàn)代碼，一起看看吧2016-12-12
jquery.ui.draggable中文文檔(原文翻譯)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)滾動刷新效果，使用Ajax獲取后臺數(shù)據(jù)更新前端頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了jQuery實現(xiàn)的輸入框選擇時間插件用法,實例分析了jQuery插件jquery.settime.js的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery過濾選擇器用法,包括可見性過濾:hidden、:visible,包含過濾:contains等各種常用的過濾選擇器,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jQuery動態(tài)修改超鏈接地址的方法,實例分析了jQuery中attr方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
jQuery 實現(xiàn)ajax傳入?yún)?shù)含有特殊字符的方法總結(jié)
在做ajax登錄時候遇到的一個問題，當(dāng)傳入?yún)?shù)含有特殊字符，比如：“$'#@”等。參數(shù)傳遞會有問題，無法正確獲取。本文章向碼農(nóng)介紹jQuery ajax特殊字符參數(shù)解決方法，需要的朋友可以參考一下。2016-10-10
jquery mobile界面數(shù)據(jù)刷新的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query mobile界面數(shù)據(jù)刷新的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery 頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部
這篇文章主要介紹了通過jQuery實現(xiàn)的頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部,需要的朋友可以參考下2014-06-06