js,jquery实现元素鼠标拖拽
2022-03-18 本文已影响0人
游走在城市的鱼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
padding-bottom: 20px;
}
.class1{
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
text-align: center;
line-height: 300px;
background-color: orange
}
.class-resize{
cursor: col-resize;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<!-- <div style="width:1000px;border: 1px solid green"> -->
<div id='d1' class="class1 clearfix"><div class="pox">改变宽高</div></div>
<!-- </div> -->
<script>
$().ready(function(){
// var originPositionX;
// var originPositionY;
var downPositonX;
var downPositonY;
var canResize = false;
$('#d1').on('mousedown',function(e){
if($('#d1').hasClass('class-resize')){
canResize = true;
}
downPositonX = event.clientX; //鼠标按下位置x
downPositonY = event.clientY; //鼠标按下位置y
// originPositionX = $('#d1').offset().left; //元素移动前位置x absolute
// originPositionY = $('#d1').offset().top; //元素移动前位置y absolute
originWidth = $('#d1').width();
originHeight = $('#d1').height();
});
$('body').on('mousemove',function(event){
event = event || window.event;
var mouseX = event.clientX;
var mouseY = event.clientY;
var elemLeft = $('#d1').offset().left;
var elemTop = $('#d1').offset().top;
var elemWidth = $('#d1').width();
var elemHeight = $('#d1').height();
if((elemLeft <= mouseX && mouseX <= elemLeft+2)&&(elemTop <= mouseY && mouseY <= elemTop + elemHeight) ||
(elemLeft+elemWidth-2 <= mouseX && mouseX <= elemLeft+elemWidth+2)&&(elemTop <= mouseY && mouseY <= elemTop + elemHeight) ||
((elemLeft <= mouseX && mouseX <= elemLeft+elemWidth)&&( elemTop <= mouseY && mouseY <= elemTop+2)) ||
((elemLeft <= mouseX && mouseX <= elemLeft+elemWidth)&&( elemTop+elemHeight-10 <= mouseY && mouseY <= elemTop+elemHeight+2))
){
$('#d1').addClass('class-resize');
}else{
$('#d1').removeClass('class-resize');
};
if(canResize){
var moveX = event.clientX - downPositonX;
var moveY = event.clientY - downPositonY;
$('#d1').width(originWidth + moveX);
$('#d1').height(originHeight + moveY);
}
});
$('#d1').on('mouseup',function(event){
canResize = false;
})
})
</script>
</body>
</html>
