jq拖拽--可用于拼图小游戏
<html>
<head>
<style>
div{width:100px;height: 100px; background-color:red ; position: absolute;}
</style>
<script type="text/javascript" src="../lib/jquery-3.4.1.js" ></script>
<script>
$(function(){
$("div ").mousedown(function(ev){
var offsetX=ev.pageX-$(this).offset().left;
//page,指鼠标光标在页面中的位置
//offset().left , 指相对于文档的左边缘(往往体现为文档的左边缘距离浏览器的左边缘)的距离
var offsetY=ev.pageY-$(this).offset().top;
//this是当前按下的div
var _this=this;
$(document).mousemove(function(ev){
$(_this).css({
left:ev.pageX-offsetX,
top:ev.pageY-offsetY
})
})
})
$(document).mouseup(function(){ //当鼠标抬起时,将document身上mousemove全部给取消掉
$(document).off("mousemove");
})
})
</script>
</head>
<body>
<div id="div1">