01_jQuery外掛程式

最後更新：2016-11-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：event sed var xtend script 改變 ext jquery win

功能：對角展開，自由拖拽

這個功能其實已經在jquery中封裝好了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.d1 {
height: 300px;
width: 600px;
background: #DDDDDD;
position: relative;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

</div>
</div>
<script>
$.fn.extend({
////封裝好的jQuery外掛程式，可以隨便移動視窗
drag: function() {
var disX = 0;
var disY = 0;
var This = this;
this.mousedown(function(ev) {
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev) {
ev.preventDefault();
This.css(‘left‘, ev.pageX - disX);
This.css(‘top‘, ev.pageY - disY);
});
$(document).mouseup(function() {
$(this).off();
});
return false;
});
return this.mousedown();
},
//封裝好的jQuery外掛程式，在右下角改變元素的大小並且可以隨便移動視窗
elementResizeAndDrag: function() {
var me = this;
this.mousemove(function(e) {
var X = $(this).width();
var Y = $(this).height();
var disX = $(this).offset().left;
var disY = $(this).offset().top;
var e = e || window.event;
if(
(e.pageX >= X + disX - 20) &&
(e.pageY >= Y + disY - 20) &&
(e.pageX <= X + disX + 20) &&
(e.pageY <= Y + disY + 20)
) {
$(this).css("cursor", "se-resize");
} else {
$(this).css("cursor", "default");
}
});
this.mousedown(function(e) {
var X = $(this).width();
var Y = $(this).height();
var disX = $(this).offset().left;
var disY = $(this).offset().top;
var e = e || window.event;
if(
(e.pageX >= X + disX - 20) &&
(e.pageY >= Y + disY - 20) &&
(e.pageX <= X + disX + 20) &&
(e.pageY <= Y + disY + 20)
) {
$(document).mousemove(function(e) {
var e = e || window.event;
e.preventDefault();
me.css(‘width‘, e.clientX - disX + ‘px‘);
me.css(‘height‘, e.clientY - disY + ‘px‘);
});
$(document).mouseup(function() {
$(this).off();
});
return false;
} else {
var disX = 0;
var disY = 0;
disX = e.pageX - $(this).offset().left;
disY = e.pageY - $(this).offset().top;
$(document).mousemove(function(e) {
var e = e || window.event;
e.preventDefault();
me.css(‘left‘, e.pageX - disX);
me.css(‘top‘, e.pageY - disY);
});
$(document).mouseup(function() {
$(this).off();
});
return false;
}

});
return this.mousedown();
},
//封裝好的jQuery外掛程式，在右下角改變元素的大小
elementResize: function() {
var me = this;
this.mousemove(function(e) {
var X = $(this).width();
var Y = $(this).height();
var disX = $(this).offset().left;
var disY = $(this).offset().top;
var e = e || window.event;
if(
(e.pageX >= X + disX - 20) &&
(e.pageY >= Y + disY - 20) &&
(e.pageX <= X + disX + 20) &&
(e.pageY <= Y + disY + 20)
) {
$(this).css("cursor", "se-resize");
} else {
$(this).css("cursor", "default");
}
});
this.mousedown(function(e) {
var X = $(this).width();
var Y = $(this).height();
var disX = $(this).offset().left;
var disY = $(this).offset().top;
var e = e || window.event;
if(
(e.pageX >= X + disX - 20) &&
(e.pageY >= Y + disY - 20) &&
(e.pageX <= X + disX + 20) &&
(e.pageY <= Y + disY + 20)
) {
$(document).mousemove(function(e) {
var e = e || window.event;
e.preventDefault();
me.css(‘width‘, e.clientX - disX + ‘px‘);
me.css(‘height‘, e.clientY - disY + ‘px‘);
});
$(document).mouseup(function() {
$(this).off();
});
return false;
}
});
return this.mousedown();
}
});
$(‘.d1‘).elementResizeAndDrag(function(){
console.log(12);
});
$(window).resize(function(){
console.log(123);
});
</script>

</body>

</html>

01_jQuery外掛程式

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

01_jQuery外掛程式

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support