每天一个jquery插件-试一下拖拽
试一下拖拽
jqueryui里面我之前用的最多的就是缩放和拖拽了，上次缩放的问题也解决了，不过今天搞点新东西就是拖拽的基本实现
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>试一下拖拽</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
#div{
width: 100px;
height: 100px;
border: 1px solid lightgray;
position: fixed;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
$("#div").mousedown(function(e){
this.flag = true;
this.o = {
x:e.offsetX,y:e.offsetY};
}).mouseup(function(){
this.flag = false;
}).mousemove(function(e){
if(this.flag){
var c = {
x:e.clientX,y:e.clientY};
$(this).css({
'left':(c.x-this.o.x)+'px',
'top':(c.y-this.o.y)+'px'
})
}
})
</script>
思路解释
- 其实就是动作的判定而已，当然我这个是直接以窗体为基础计算坐标的，很多时候你可以能是要求在一个容器中拖动它的子容器进行运动，但是原理几乎不差，所以就不展示了。