A jquery plug-in every day-try drag and drop
Try drag
In jqueryui, what I used the most before is zooming and dragging. The problem of zooming was solved last time. But today, something new is the basic implementation of dragging.
The effect is as follows
Code part
<!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>
Idea explanation
- In fact, it is just the determination of the action. Of course, I calculate the coordinates directly on the basis of the form. Many times you may ask to drag its sub-containers in a container to move, but the principle is almost not bad, so it is not. Shows.