插件中的this

最新推荐文章于 2024-02-20 17:27:08 发布

原创最新推荐文章于 2024-02-20 17:27:08 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义拖拽插件实现过程，包括如何通过mousedown、mousemove及mouseup事件来改变元素的位置，同时展示了如何扩展jQuery和jQuery.fn以增加新的功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插件中的this</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$.extend({
aaa:function(){
alert(1111);
}
});
$.fn.extend({
drag:function(){
var x=0;
var y=0;
var This=this; //this=$('#div1') jQuery对象
This.mousedown(function(ev){
x=ev.pageX - $(this).offset().left; //$(this)=$('#div1') this是原生的
y=ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$('#div1').css('left',ev.pageX - x);
$('#div1').css('top',ev.pageY - y);
})
$(document).mouseup(function(){
$(this).off();
})
return false;
})
},
aaa:function(){
alert(222);
}
})
})
$(function(){
$('#div1').drag();
$.aaa();
$().aaa();
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>