<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery扩展插件</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
div{width:100px;height: 100px;background-color: red;position: absolute;}
</style>
</head>
<body>
<!--
扩展插件就是本身库没有的方法，需要自己写或者调用其他的方法 -->
<div id="id1"></div>
<script type="text/javascript">
//该方法是扩展工具方法下的插件形式。访问形式为$.leftTrim(str)
$.extend({
leftTrim:function(str){
//去除字符串的左空格
return str.replace(/^\s+/,'');
}
})
// alert("("+$.leftTrim(" hahha ")+")");
$.fn.extend({
drag:function(){
//该函数里的this指向调用drag函数的那个对象
var disX=0;
var disY=0;
var This=this;
this.mousedown(function(ev){
console.log(ev);
// 鼠标点击时产生的对象ev
//鼠标离div的左边的距离
disX=ev.pageX-$(this).offset().left;
//鼠标离div的上边的距离
disY=ev.pageY-$(this).offset().top;
//div产生鼠标移动事件,只是没有相应的事件操作函数，由于冒泡会传给上级元素，所以会触发文档的鼠标移动事件
$(document).mousemove(function(ev){
This.css('left',ev.pageX-disX);
This.css('top',ev.pageY-disY);
});
$(document).mouseup(function(){
//删除事件
$(this).off();
});
return false;
})
}
});
//jquery对象中没有drag方法。我们想通过插件形式实现拖拽的方法
$("#id1").drag();
</script>
</body>
</html>
