<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<!--
1.给jquery对象本身扩展方法 $.xxx
2.给jquery Dom对象扩展方法 $(div).xxx
-->
<div class="div1">fff</div>
<div class="div2">fff</div>
<div class="div3">fff</div>
<script>
// 1.给jquery对象本身扩展方法
$.extend({
lg(){
console.log('扩展lg方法')
}
})
// $.lg()
// 2.给jquery Dom对象扩展方法
$.fn.extend({
domfun(){
// $(this); 指向调用者 $(div)
console.log('扩展domfun方法')
return $(this)
}
})
// 或者
$.fn.domfun2 = function(){
// $(this); 指向调用者 $(div)
console.log('扩展domfun方法')
return $(this)
}
// $(div).domfun().domfun2
$.fn.dragGable = function(options={}){
const defaultObj = {
limit: false,
}
Object.assign(defaultObj, options)
const {limit} = defaultObj
const dom = $(this)
// 修改元素定位
dom.css({
position:'absolute',
top:0,
left:0,
cursor: 'move'
})
dom.mousedown(function(e){
let startX = e.pageX - dom.offset().left
let startY = e.pageY - dom.offset().top
$(document).mousemove(function(ed){
let moveX = ed.pageX - startX
let moveY = ed.pageY - startY
// 边界限制
if(limit){
let rightBorder = $(this).innerWidth() - dom.outerWidth()
let bottomBorder = $(this).innerHeight() - dom.outerHeight()
moveX = moveX <= 0 ? 0 : moveX
moveX = moveX >= rightBorder ? rightBorder : moveX
moveY = moveY <= 0 ? 0 : moveY
moveY = moveY >= bottomBorder ? bottomBorder : moveY
}
dom.css({
left: moveX,
top: moveY
})
})
$(document).mouseup(function(){
$(this).off()
})
return false
})
}
$('.div1').dragGable({
limit: true, // 是否限制范围
})
$('.div2').dragGable()
$('.div3').dragGable()
</script>
</body>
</html>
jquery 自定义插件 拖拽
最新推荐文章于 2023-01-12 15:49:43 发布